• 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>
            html,
            body,
            #myChart {
                height: 100%;
                width: 100%;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id='myChart'></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                graphset: [{
                    type: 'treemap',
                    plotarea: {
                        margin: '0 0 30 0'
                    },
                    options: {
                        splitType: 'alternate' //balanced (default), horizontal, vertical, alternate
                    },
                    series: [{
                            text: 'North America',
                            children: [{
                                    text: 'United States',
                                    children: [{
                                            text: 'Texas',
                                            value: 21
                                        },
                                        {
                                            text: 'California',
                                            value: 53
                                        },
                                        {
                                            text: 'Ohio',
                                            value: 12
                                        },
                                        {
                                            text: 'New York',
                                            value: 46
                                        },
                                        {
                                            text: 'Michigan',
                                            value: 39
                                        },
                                        {
                                            text: 'Alabama',
                                            value: 25
                                        }
                                    ]
                                },
                                {
                                    text: 'Canada',
                                    value: 113
                                },
                                {
                                    text: 'Mexico',
                                    value: 78
                                }
                            ]
                        },
                        {
                            text: 'Europe',
                            children: [{
                                    text: 'France',
                                    value: 42
                                },
                                {
                                    text: 'Spain',
                                    value: 28
                                },
                                {
                                    text: 'Switzerland',
                                    value: 13
                                },
                                {
                                    text: 'Germany',
                                    value: 56
                                },
                                {
                                    text: 'Cyprus',
                                    value: 7
                                }
                            ]
                        },
                        {
                            text: 'Africa',
                            children: [{
                                    text: 'Egypt',
                                    value: 22
                                },
                                {
                                    text: 'Congo',
                                    value: 38
                                },
                                {
                                    text: 'Lesotho',
                                    value: 9
                                }
                            ]
                        },
                        {
                            text: 'Asia',
                            children: [{
                                    text: 'India',
                                    value: 92
                                },
                                {
                                    text: 'China',
                                    value: 68
                                },
                                {
                                    text: 'Mongolia',
                                    value: 25
                                }
                            ]
                        },
                        {
                            text: 'South America',
                            children: [{
                                    text: 'Brazil',
                                    value: 42
                                },
                                {
                                    text: 'Argentina',
                                    value: 28
                                },
                                {
                                    text: 'Peru',
                                    value: 15
                                },
                                {
                                    text: 'Uruguay',
                                    value: 33
                                }
                            ]
                        },
                        {
                            text: 'Australia (continent)',
                            children: [{
                                    text: 'Australia (country)',
                                    value: 121
                                },
                                {
                                    text: 'New Zealand',
                                    value: 24
                                }
                            ]
                        }
                    ]
                }]
            };
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: "100%",
                width: "100%"
            });
        </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>
    html,body,#myChart{
     height: 100%;
     width: 100%;
    }
    var myConfig = {
      graphset: [
        {
          type: 'treemap',
          plotarea: {
            margin: '0 0 30 0'
          },
          options: {
            splitType: 'alternate' //balanced (default), horizontal, vertical, alternate
          },
          series: [
            {
              text: 'North America',
              children: [
                {
                  text: 'United States',
                  children: [
                    {
                      text: 'Texas',
                      value: 21
                    },
                    {
                      text: 'California',
                      value: 53
                    },
                    {
                      text: 'Ohio',
                      value: 12
                    },
                    {
                      text: 'New York',
                      value: 46
                    },
                    {
                      text: 'Michigan',
                      value: 39
                    },
                    {
                      text: 'Alabama',
                      value: 25
                    }
                  ]
                },
                {
                  text: 'Canada',
                  value: 113
                },
                {
                  text: 'Mexico',
                  value: 78
                }
              ]
            },
            {
              text: 'Europe',
              children: [
                {
                  text: 'France',
                  value: 42
                },
                {
                  text: 'Spain',
                  value: 28
                },
                {
                  text: 'Switzerland',
                  value: 13
                },
                {
                  text: 'Germany',
                  value: 56
                },
                {
                  text: 'Cyprus',
                  value: 7
                }
              ]
            },
            {
              text: 'Africa',
              children: [
                {
                  text: 'Egypt',
                  value: 22
                },
                {
                  text: 'Congo',
                  value: 38
                },
                {
                  text: 'Lesotho',
                  value: 9
                }
              ]
            },
            {
              text: 'Asia',
              children: [
                {
                  text: 'India',
                  value: 92
                },
                {
                  text: 'China',
                  value: 68
                },
                {
                  text: 'Mongolia',
                  value: 25
                }
              ]
            },
            {
              text: 'South America',
              children: [
                {
                  text: 'Brazil',
                  value: 42
                },
                {
                  text: 'Argentina',
                  value: 28
                },
                {
                  text: 'Peru',
                  value: 15
                },
                {
                  text: 'Uruguay',
                  value: 33
                }
              ]
            },
            {
              text: 'Australia (continent)',
              children: [
                {
                  text: 'Australia (country)',
                  value: 121
                },
                {
                  text: 'New Zealand',
                  value: 24
                }
              ]
            }
          ]
        }
      ]
    };
    
    zingchart.render({ 
    	id : 'myChart', 
    	data : myConfig, 
    	height: "100%", 
    	width: "100%" 
    });