• 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.     #myChart {
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body>
    20.   <div id='myChart'></div>
    21.   <script>
    22.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    23.     let chartConfig = {
    24.       type: 'treemap',
    25.       plotarea: {
    26.         margin: '0 0 30 0'
    27.       },
    28.       options: {
    29.         decimals: 2
    30.       },
    31.       series: [{
    32.           text: 'North America',
    33.           children: [{
    34.               text: 'United States',
    35.               children: [{
    36.                   text: 'Texas',
    37.                   value: 21.23414
    38.                 },
    39.                 {
    40.                   text: 'California',
    41.                   value: 53
    42.                 },
    43.                 {
    44.                   text: 'Ohio',
    45.                   value: 12.2
    46.                 },
    47.                 {
    48.                   text: 'New York',
    49.                   value: 46
    50.                 },
    51.                 {
    52.                   text: 'Michigan',
    53.                   value: 39.123
    54.                 },
    55.                 {
    56.                   text: 'Alabama',
    57.                   value: 25
    58.                 }
    59.               ]
    60.             },
    61.             {
    62.               text: 'Canada',
    63.               value: 113
    64.             },
    65.             {
    66.               text: 'Mexico',
    67.               value: 78
    68.             }
    69.           ]
    70.         },
    71.         {
    72.           text: 'Europe',
    73.           children: [{
    74.               text: 'France',
    75.               value: 42.2342
    76.             },
    77.             {
    78.               text: 'Spain',
    79.               value: 28.3
    80.             },
    81.             {
    82.               text: 'Switzerland',
    83.               value: 13.3
    84.             },
    85.             {
    86.               text: 'Germany',
    87.               value: 56
    88.             },
    89.             {
    90.               text: 'Cyprus',
    91.               value: 7.47
    92.             }
    93.           ]
    94.         },
    95.         {
    96.           text: 'Africa',
    97.           children: [{
    98.               text: 'Egypt',
    99.               value: 22.3472
    100.             },
    101.             {
    102.               text: 'Congo',
    103.               value: 38
    104.             },
    105.             {
    106.               text: 'Lesotho',
    107.               value: 9.3462
    108.             }
    109.           ]
    110.         },
    111.         {
    112.           text: 'Asia',
    113.           children: [{
    114.               text: 'India',
    115.               value: 92.33
    116.             },
    117.             {
    118.               text: 'China',
    119.               value: 68
    120.             },
    121.             {
    122.               text: 'Mongolia',
    123.               value: 25.7
    124.             }
    125.           ]
    126.         },
    127.         {
    128.           text: 'South America',
    129.           children: [{
    130.               text: 'Brazil',
    131.               value: 42.3
    132.             },
    133.             {
    134.               text: 'Argentina',
    135.               value: 28.26747
    136.             },
    137.             {
    138.               text: 'Peru',
    139.               value: 15
    140.             },
    141.             {
    142.               text: 'Uruguay',
    143.               value: 33
    144.             }
    145.           ]
    146.         },
    147.         {
    148.           text: 'Australia (continent)',
    149.           children: [{
    150.               text: 'Australia (country)',
    151.               value: 121.235
    152.             },
    153.             {
    154.               text: 'New Zealand',
    155.               value: 24
    156.             }
    157.           ]
    158.         }
    159.       ]
    160.     };
    161.  
    162.     zingchart.render({
    163.       id: 'myChart',
    164.       data: chartConfig,
    165.       height: '100%',
    166.       width: '100%'
    167.     });
    168.   </script>
    169. </body>
    170.  
    171. </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. html,
    2. body,
    3. #myChart {
    4.   height: 100%;
    5.   width: 100%;
    6. }
    1. let chartConfig = {
    2.   type: 'treemap',
    3.   plotarea: {
    4.     margin: '0 0 30 0'
    5.   },
    6.   options: {
    7.     decimals: 2
    8.   },
    9.   series: [{
    10.       text: 'North America',
    11.       children: [{
    12.           text: 'United States',
    13.           children: [{
    14.               text: 'Texas',
    15.               value: 21.23414
    16.             },
    17.             {
    18.               text: 'California',
    19.               value: 53
    20.             },
    21.             {
    22.               text: 'Ohio',
    23.               value: 12.2
    24.             },
    25.             {
    26.               text: 'New York',
    27.               value: 46
    28.             },
    29.             {
    30.               text: 'Michigan',
    31.               value: 39.123
    32.             },
    33.             {
    34.               text: 'Alabama',
    35.               value: 25
    36.             }
    37.           ]
    38.         },
    39.         {
    40.           text: 'Canada',
    41.           value: 113
    42.         },
    43.         {
    44.           text: 'Mexico',
    45.           value: 78
    46.         }
    47.       ]
    48.     },
    49.     {
    50.       text: 'Europe',
    51.       children: [{
    52.           text: 'France',
    53.           value: 42.2342
    54.         },
    55.         {
    56.           text: 'Spain',
    57.           value: 28.3
    58.         },
    59.         {
    60.           text: 'Switzerland',
    61.           value: 13.3
    62.         },
    63.         {
    64.           text: 'Germany',
    65.           value: 56
    66.         },
    67.         {
    68.           text: 'Cyprus',
    69.           value: 7.47
    70.         }
    71.       ]
    72.     },
    73.     {
    74.       text: 'Africa',
    75.       children: [{
    76.           text: 'Egypt',
    77.           value: 22.3472
    78.         },
    79.         {
    80.           text: 'Congo',
    81.           value: 38
    82.         },
    83.         {
    84.           text: 'Lesotho',
    85.           value: 9.3462
    86.         }
    87.       ]
    88.     },
    89.     {
    90.       text: 'Asia',
    91.       children: [{
    92.           text: 'India',
    93.           value: 92.33
    94.         },
    95.         {
    96.           text: 'China',
    97.           value: 68
    98.         },
    99.         {
    100.           text: 'Mongolia',
    101.           value: 25.7
    102.         }
    103.       ]
    104.     },
    105.     {
    106.       text: 'South America',
    107.       children: [{
    108.           text: 'Brazil',
    109.           value: 42.3
    110.         },
    111.         {
    112.           text: 'Argentina',
    113.           value: 28.26747
    114.         },
    115.         {
    116.           text: 'Peru',
    117.           value: 15
    118.         },
    119.         {
    120.           text: 'Uruguay',
    121.           value: 33
    122.         }
    123.       ]
    124.     },
    125.     {
    126.       text: 'Australia (continent)',
    127.       children: [{
    128.           text: 'Australia (country)',
    129.           value: 121.235
    130.         },
    131.         {
    132.           text: 'New Zealand',
    133.           value: 24
    134.         }
    135.       ]
    136.     }
    137.   ]
    138. };
    139.  
    140. zingchart.render({
    141.   id: 'myChart',
    142.   data: chartConfig,
    143.   height: '100%',
    144.   width: '100%'
    145. });