• 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%;
        }
      </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%"
    });