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