• 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>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.  
    28.     select {
    29.       margin: 10px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body>
    35.   <div id="myChart">
    36.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    37.     <select id="treemap-layout">
    38.       <option selected value="balanced">Balanced</option>
    39.       <option value="balancedV2">Balanced(v2)</option>
    40.       <option value="random">Random</option>
    41.       <option value="horizontal">Horizontal</option>
    42.       <option value="vertical">Vertical</option>
    43.       <option value="squarify">Squarify</option>
    44.       <option value="squarifyV2">Squarify(v2)</option>
    45.     </select>
    46.   </div>
    47.   <script>
    48.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    49.     let chartConfig = {
    50.       type: 'treemap',
    51.       options: {
    52.         splitType: 'balanced',
    53.         colorType: 'palette',
    54.         palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
    55.       },
    56.       plotarea: {
    57.         margin: '0 0 35 0'
    58.       },
    59.       series: [{
    60.           text: 'North America',
    61.           children: [{
    62.               text: 'United States',
    63.               children: [{
    64.                 text: 'Texas',
    65.                 value: 90
    66.               }]
    67.             },
    68.             {
    69.               text: 'Canada',
    70.               value: 113
    71.             },
    72.             {
    73.               text: 'Mexico',
    74.               value: 78
    75.             }
    76.           ]
    77.         },
    78.         {
    79.           text: 'Europe',
    80.           children: [{
    81.               text: 'France',
    82.               value: 42
    83.             },
    84.             {
    85.               text: 'Spain',
    86.               value: 28
    87.             }
    88.           ]
    89.         },
    90.         {
    91.           text: 'Africa',
    92.           children: [{
    93.               text: 'Egypt',
    94.               value: 22
    95.             },
    96.             {
    97.               text: 'Congo',
    98.               value: 38
    99.             }
    100.           ]
    101.         },
    102.         {
    103.           text: 'Asia',
    104.           children: [{
    105.               text: 'India',
    106.               value: 92
    107.             },
    108.             {
    109.               text: 'China',
    110.               value: 68
    111.             }
    112.           ]
    113.         },
    114.         {
    115.           text: 'South America',
    116.           children: [{
    117.               text: 'Brazil',
    118.               value: 42
    119.             },
    120.             {
    121.               text: 'Argentina',
    122.               value: 28
    123.             }
    124.           ]
    125.         },
    126.         {
    127.           text: 'Australia (continent)',
    128.           children: [{
    129.               text: 'Australia (country)',
    130.               value: 121
    131.             },
    132.             {
    133.               text: 'New Zealand',
    134.               value: 24
    135.             }
    136.           ]
    137.         }
    138.       ]
    139.     };
    140.  
    141.     zingchart.render({
    142.       id: 'myChart',
    143.       data: chartConfig,
    144.       height: '100%',
    145.       width: '100%'
    146.     });
    147.  
    148.     document.getElementById('treemap-layout').addEventListener('change', function(e) {
    149.       myConfig.options['split-type'] = e.srcElement.value;
    150.       zingchart.exec('myChart', 'setdata', {
    151.         data: myConfig
    152.       });
    153.     })
    154.   </script>
    155. </body>
    156.  
    157. </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">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.     <select id="treemap-layout">
    15.       <option selected value="balanced">Balanced</option>
    16.       <option value="balancedV2">Balanced(v2)</option>
    17.       <option value="random">Random</option>
    18.       <option value="horizontal">Horizontal</option>
    19.       <option value="vertical">Vertical</option>
    20.       <option value="squarify">Squarify</option>
    21.       <option value="squarifyV2">Squarify(v2)</option>
    22.     </select>
    23.   </div>
    24. </body>
    25.  
    26. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    18.  
    19. select {
    20.   margin: 10px;
    21. }
    1. let chartConfig = {
    2.   type: 'treemap',
    3.   options: {
    4.     splitType: 'balanced',
    5.     colorType: 'palette',
    6.     palette: ['#f44336', '#29b6f6', '#ab47bc', '#ffc107', '#5c6bc0', '#009688']
    7.   },
    8.   plotarea: {
    9.     margin: '0 0 35 0'
    10.   },
    11.   series: [{
    12.       text: 'North America',
    13.       children: [{
    14.           text: 'United States',
    15.           children: [{
    16.             text: 'Texas',
    17.             value: 90
    18.           }]
    19.         },
    20.         {
    21.           text: 'Canada',
    22.           value: 113
    23.         },
    24.         {
    25.           text: 'Mexico',
    26.           value: 78
    27.         }
    28.       ]
    29.     },
    30.     {
    31.       text: 'Europe',
    32.       children: [{
    33.           text: 'France',
    34.           value: 42
    35.         },
    36.         {
    37.           text: 'Spain',
    38.           value: 28
    39.         }
    40.       ]
    41.     },
    42.     {
    43.       text: 'Africa',
    44.       children: [{
    45.           text: 'Egypt',
    46.           value: 22
    47.         },
    48.         {
    49.           text: 'Congo',
    50.           value: 38
    51.         }
    52.       ]
    53.     },
    54.     {
    55.       text: 'Asia',
    56.       children: [{
    57.           text: 'India',
    58.           value: 92
    59.         },
    60.         {
    61.           text: 'China',
    62.           value: 68
    63.         }
    64.       ]
    65.     },
    66.     {
    67.       text: 'South America',
    68.       children: [{
    69.           text: 'Brazil',
    70.           value: 42
    71.         },
    72.         {
    73.           text: 'Argentina',
    74.           value: 28
    75.         }
    76.       ]
    77.     },
    78.     {
    79.       text: 'Australia (continent)',
    80.       children: [{
    81.           text: 'Australia (country)',
    82.           value: 121
    83.         },
    84.         {
    85.           text: 'New Zealand',
    86.           value: 24
    87.         }
    88.       ]
    89.     }
    90.   ]
    91. };
    92.  
    93. zingchart.render({
    94.   id: 'myChart',
    95.   data: chartConfig,
    96.   height: '100%',
    97.   width: '100%'
    98. });
    99.  
    100. document.getElementById('treemap-layout').addEventListener('change', function(e) {
    101.   myConfig.options['split-type'] = e.srcElement.value;
    102.   zingchart.exec('myChart', 'setdata', {
    103.     data: myConfig
    104.   });
    105. })