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