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