• 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.           "max-children": [8, 2, 4]
    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.  
    164.     zingchart.render({
    165.       id: 'myChart',
    166.       data: myConfig,
    167.       height: "100%",
    168.       width: "100%"
    169.     });
    170.   </script>
    171. </body>
    172.  
    173. </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.       "max-children": [8, 2, 4]
    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.  
    142. zingchart.render({
    143.   id: 'myChart',
    144.   data: myConfig,
    145.   height: "100%",
    146.   width: "100%"
    147. });