• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style></style>
    10. </head>
    11.  
    12. <body>
    13.   <div id="myChart"></div>
    14.   <script>
    15.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    16.     let chartConfig = {
    17.       type: "treemap",
    18.       options: {
    19.         splitType: "random" //horizontal, vertical, alternate
    20.       },
    21.       series: [{
    22.           "text": "United States",
    23.           "children": [{
    24.               "text": "California",
    25.               "children": [{
    26.                   "text": "Orange County",
    27.                   "children": [{
    28.                     "text": "Irvine",
    29.                     "value": 50
    30.                   }]
    31.                 },
    32.                 {
    33.                   "text": "San Diego",
    34.                   "children": [{
    35.                       "text": "La Jolla",
    36.                       "value": 20
    37.                     },
    38.                     {
    39.                       "text": "San Diego",
    40.                       "value": 35
    41.                     }
    42.                   ]
    43.                 }
    44.               ]
    45.             },
    46.             {
    47.               "text": "New York",
    48.               "children": [{
    49.                   "text": "County 1",
    50.                   "children": [{
    51.                     "text": "City 1",
    52.                     "value": 50
    53.                   }]
    54.                 },
    55.                 {
    56.                   "text": "County 2",
    57.                   "children": [{
    58.                       "text": "City 2",
    59.                       "value": 20
    60.                     },
    61.                     {
    62.                       "text": "City 3",
    63.                       "value": 20
    64.                     }
    65.                   ]
    66.                 }
    67.               ]
    68.  
    69.             },
    70.             {
    71.               "text": "Ohio",
    72.               "children": [{
    73.                   "text": "County 1",
    74.                   "children": [{
    75.                     "text": "City 1",
    76.                     "value": 150
    77.                   }]
    78.                 },
    79.                 {
    80.                   "text": "County 2",
    81.                   "children": [{
    82.                       "text": "City 2",
    83.                       "value": 40
    84.                     },
    85.                     {
    86.                       "text": "City 3",
    87.                       "value": 90
    88.                     }
    89.                   ]
    90.                 }
    91.               ]
    92.             },
    93.             {
    94.               "text": "North Carolina",
    95.               "children": [{
    96.                   "text": "County 1",
    97.                   "children": [{
    98.                     "text": "City 1",
    99.                     "value": 250
    100.                   }]
    101.                 },
    102.                 {
    103.                   "text": "County 2",
    104.                   "children": [{
    105.                       "text": "City 2",
    106.                       "value": 120
    107.                     },
    108.                     {
    109.                       "text": "City 3",
    110.                       "value": 140
    111.                     }
    112.                   ]
    113.                 }
    114.               ]
    115.             }
    116.           ]
    117.         },
    118.  
    119.       ]
    120.     };
    121.  
    122.     zingchart.render({
    123.       id: 'myChart',
    124.       data: chartConfig,
    125.     });
    126.   </script>
    127. </body>
    128.  
    129. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"></div>
    13. </body>
    14.  
    15. </html>
    1.  
    1. let chartConfig = {
    2.   type: "treemap",
    3.   options: {
    4.     splitType: "random" //horizontal, vertical, alternate
    5.   },
    6.   series: [{
    7.       "text": "United States",
    8.       "children": [{
    9.           "text": "California",
    10.           "children": [{
    11.               "text": "Orange County",
    12.               "children": [{
    13.                 "text": "Irvine",
    14.                 "value": 50
    15.               }]
    16.             },
    17.             {
    18.               "text": "San Diego",
    19.               "children": [{
    20.                   "text": "La Jolla",
    21.                   "value": 20
    22.                 },
    23.                 {
    24.                   "text": "San Diego",
    25.                   "value": 35
    26.                 }
    27.               ]
    28.             }
    29.           ]
    30.         },
    31.         {
    32.           "text": "New York",
    33.           "children": [{
    34.               "text": "County 1",
    35.               "children": [{
    36.                 "text": "City 1",
    37.                 "value": 50
    38.               }]
    39.             },
    40.             {
    41.               "text": "County 2",
    42.               "children": [{
    43.                   "text": "City 2",
    44.                   "value": 20
    45.                 },
    46.                 {
    47.                   "text": "City 3",
    48.                   "value": 20
    49.                 }
    50.               ]
    51.             }
    52.           ]
    53.  
    54.         },
    55.         {
    56.           "text": "Ohio",
    57.           "children": [{
    58.               "text": "County 1",
    59.               "children": [{
    60.                 "text": "City 1",
    61.                 "value": 150
    62.               }]
    63.             },
    64.             {
    65.               "text": "County 2",
    66.               "children": [{
    67.                   "text": "City 2",
    68.                   "value": 40
    69.                 },
    70.                 {
    71.                   "text": "City 3",
    72.                   "value": 90
    73.                 }
    74.               ]
    75.             }
    76.           ]
    77.         },
    78.         {
    79.           "text": "North Carolina",
    80.           "children": [{
    81.               "text": "County 1",
    82.               "children": [{
    83.                 "text": "City 1",
    84.                 "value": 250
    85.               }]
    86.             },
    87.             {
    88.               "text": "County 2",
    89.               "children": [{
    90.                   "text": "City 2",
    91.                   "value": 120
    92.                 },
    93.                 {
    94.                   "text": "City 3",
    95.                   "value": 140
    96.                 }
    97.               ]
    98.             }
    99.           ]
    100.         }
    101.       ]
    102.     },
    103.  
    104.   ]
    105. };
    106.  
    107. zingchart.render({
    108.   id: 'myChart',
    109.   data: chartConfig,
    110. });