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