• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            zing-grid[loading] {
                height: 480px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            let chartConfig = {
                type: "treemap",
                options: {
                    splitType: "random" //horizontal, vertical, alternate
                },
                series: [{
                        "text": "United States",
                        "children": [{
                                "text": "California",
                                "children": [{
                                        "text": "Orange County",
                                        "children": [{
                                            "text": "Irvine",
                                            "value": 50
                                        }]
                                    },
                                    {
                                        "text": "San Diego",
                                        "children": [{
                                                "text": "La Jolla",
                                                "value": 20
                                            },
                                            {
                                                "text": "San Diego",
                                                "value": 35
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "text": "New York",
                                "children": [{
                                        "text": "County 1",
                                        "children": [{
                                            "text": "City 1",
                                            "value": 50
                                        }]
                                    },
                                    {
                                        "text": "County 2",
                                        "children": [{
                                                "text": "City 2",
                                                "value": 20
                                            },
                                            {
                                                "text": "City 3",
                                                "value": 20
                                            }
                                        ]
                                    }
                                ]
    
                            },
                            {
                                "text": "Ohio",
                                "children": [{
                                        "text": "County 1",
                                        "children": [{
                                            "text": "City 1",
                                            "value": 150
                                        }]
                                    },
                                    {
                                        "text": "County 2",
                                        "children": [{
                                                "text": "City 2",
                                                "value": 40
                                            },
                                            {
                                                "text": "City 3",
                                                "value": 90
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "text": "North Carolina",
                                "children": [{
                                        "text": "County 1",
                                        "children": [{
                                            "text": "City 1",
                                            "value": 250
                                        }]
                                    },
                                    {
                                        "text": "County 2",
                                        "children": [{
                                                "text": "City 2",
                                                "value": 120
                                            },
                                            {
                                                "text": "City 3",
                                                "value": 140
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
    
                ]
            };
    
            zingchart.render({
                id: 'myChart',
                data: chartConfig,
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="myChart"></div>
    	</body>
    </html>
    
          
    let chartConfig = {
     	type: "treemap", 
     	options:{
     	  splitType: "random" //horizontal, vertical, alternate
     	},
    	series : [
    		{
    			"text":"United States",
    			"children": [
    			  {
    			    "text":"California",
    			    "children": [
    			       {
    			         "text":"Orange County",
    			         "children":  [
    			            {
    			              "text":"Irvine",
    			              "value":50
    			            }
    			          ]
    			       },
    			       {
    			         "text":"San Diego",
    			         "children":  [
    			           {
    			             "text":"La Jolla",
    			             "value":20
    			           },
    			           {
    			             "text":"San Diego",
    			             "value":35
    			           }]
    			       }
    			] 
    		},
    		{
    			"text":"New York",
    			"children": [
    			       {
    			         "text":"County 1",
    			         "children":  [
    			            {
    			              "text":"City 1",
    			              "value":50
    			            }
    			          ]
    			       },
    			       {
    			         "text":"County 2",
    			         "children":  [
    			           {
    			             "text":"City 2",
    			             "value":20
    			           },
    			           {
    			             "text":"City 3",
    			             "value":20
    			           }]
    			       }
    			] 
    
    		},
    		{
    			"text":"Ohio",
    				"children": [
    			       {
    			         "text":"County 1",
    			         "children":  [
    			            {
    			              "text":"City 1",
    			              "value":150
    			            }
    			          ]
    			       },
    			       {
    			         "text":"County 2",
    			         "children":  [
    			           {
    			             "text":"City 2",
    			             "value":40
    			           },
    			           {
    			             "text":"City 3",
    			             "value":90
    			           }]
    			       }
    			] 
    		},
    		{
    			"text":"North Carolina",
    				"children": [
    			       {
    			         "text":"County 1",
    			         "children":  [
    			            {
    			              "text":"City 1",
    			              "value":250
    			            }
    			          ]
    			       },
    			       {
    			         "text":"County 2",
    			         "children":  [
    			           {
    			             "text":"City 2",
    			             "value":120
    			           },
    			           {
    			             "text":"City 3",
    			             "value":140
    			           }]
    			       }
    			] 
    		}
    	]
    	},
    	
    	]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : chartConfig, 
    });