• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script nonce="undefined">
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15.   <style>
    16.     html,
    17.     body {
    18.       height: 100%;
    19.       width: 100%;
    20.       margin: 0;
    21.       padding: 0;
    22.     }
    23.  
    24.     #myChart {
    25.       height: 100%;
    26.       width: 100%;
    27.       min-height: 600px;
    28.     }
    29.  
    30.     .zc-ref {
    31.       display: none;
    32.     }
    33.   </style>
    34. </head>
    35.  
    36. <body>
    37.   <!-- CHART CONTAINER -->
    38.   <div id="myChart">
    39.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    40.   </div>
    41.   <script>
    42.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    43.     // because this Javascript is injected into the document head
    44.     window.addEventListener('load', () => {
    45.       // graph configuration
    46.       let chartConfig = {
    47.         "graphset": [{
    48.           "type": "treemap",
    49.           "plotarea": {
    50.             "margin": "0 0 30 0"
    51.           },
    52.           "tooltip": {
    53.  
    54.           },
    55.           "options": {
    56.  
    57.           },
    58.           "series": [{
    59.               "text": "North America",
    60.               "children": [{
    61.                   "text": "United States",
    62.                   "children": [{
    63.                       "text": "Texas",
    64.                       "value": 21
    65.                     },
    66.                     {
    67.                       "text": "California",
    68.                       "value": 53
    69.                     },
    70.                     {
    71.                       "text": "Ohio",
    72.                       "value": 12
    73.                     },
    74.                     {
    75.                       "text": "New York",
    76.                       "value": 46
    77.                     },
    78.                     {
    79.                       "text": "Michigan",
    80.                       "value": 39
    81.                     },
    82.                     {
    83.                       "text": "Alabama",
    84.                       "value": 25
    85.                     }
    86.                   ]
    87.                 },
    88.                 {
    89.                   "text": "Canada",
    90.                   "value": 113
    91.                 },
    92.                 {
    93.                   "text": "Mexico",
    94.                   "value": 78
    95.                 }
    96.               ]
    97.             },
    98.             {
    99.               "text": "Europe",
    100.               "children": [{
    101.                   "text": "France",
    102.                   "value": 42
    103.                 },
    104.                 {
    105.                   "text": "Spain",
    106.                   "value": 28
    107.                 },
    108.                 {
    109.                   "text": "Switzerland",
    110.                   "value": 13
    111.                 },
    112.                 {
    113.                   "text": "Germany",
    114.                   "value": 56
    115.                 },
    116.                 {
    117.                   "text": "Cyprus",
    118.                   "value": 7
    119.                 }
    120.               ]
    121.             },
    122.             {
    123.               "text": "Africa",
    124.               "children": [{
    125.                   "text": "Egypt",
    126.                   "value": 22
    127.                 },
    128.                 {
    129.                   "text": "Congo",
    130.                   "value": 38
    131.                 },
    132.                 {
    133.                   "text": "Lesotho",
    134.                   "value": 9
    135.                 }
    136.               ]
    137.             },
    138.             {
    139.               "text": "Asia",
    140.               "children": [{
    141.                   "text": "India",
    142.                   "value": 92
    143.                 },
    144.                 {
    145.                   "text": "China",
    146.                   "value": 68
    147.                 },
    148.                 {
    149.                   "text": "Mongolia",
    150.                   "value": 25
    151.                 }
    152.               ]
    153.             },
    154.             {
    155.               "text": "South America",
    156.               "children": [{
    157.                   "text": "Brazil",
    158.                   "value": 42
    159.                 },
    160.                 {
    161.                   "text": "Argentina",
    162.                   "value": 28
    163.                 },
    164.                 {
    165.                   "text": "Peru",
    166.                   "value": 15
    167.                 },
    168.                 {
    169.                   "text": "Uruguay",
    170.                   "value": 33
    171.                 }
    172.               ]
    173.             },
    174.             {
    175.               "text": "Australia (continent)",
    176.               "children": [{
    177.                   "text": "Australia (country)",
    178.                   "value": 121
    179.                 },
    180.                 {
    181.                   "text": "New Zealand",
    182.                   "value": 24
    183.                 }
    184.               ]
    185.             }
    186.           ]
    187.         }]
    188.       };
    189.  
    190.       // render chart with width and height to
    191.       // fill the parent container CSS dimensions
    192.       zingchart.render({
    193.         id: 'myChart',
    194.         data: chartConfig,
    195.         height: '100%',
    196.         width: '100%',
    197.       });
    198.     });
    199.   </script>
    200. </body>
    201.  
    202. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <!-- 
    9. 			Point ZingChart to modules folder so ZingChart
    10. 			can automatically grab the CSV module 
    11. 		-->
    12.   <script>
    13.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    14.   </script>
    15. </head>
    16.  
    17. <body>
    18.   <!-- CHART CONTAINER -->
    19.   <div id="myChart">
    20.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    21.   </div>
    22. </body>
    23.  
    24. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 600px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // graph configuration
    5.   let chartConfig = {
    6.     "graphset": [{
    7.       "type": "treemap",
    8.       "plotarea": {
    9.         "margin": "0 0 30 0"
    10.       },
    11.       "tooltip": {
    12.  
    13.       },
    14.       "options": {
    15.  
    16.       },
    17.       "series": [{
    18.           "text": "North America",
    19.           "children": [{
    20.               "text": "United States",
    21.               "children": [{
    22.                   "text": "Texas",
    23.                   "value": 21
    24.                 },
    25.                 {
    26.                   "text": "California",
    27.                   "value": 53
    28.                 },
    29.                 {
    30.                   "text": "Ohio",
    31.                   "value": 12
    32.                 },
    33.                 {
    34.                   "text": "New York",
    35.                   "value": 46
    36.                 },
    37.                 {
    38.                   "text": "Michigan",
    39.                   "value": 39
    40.                 },
    41.                 {
    42.                   "text": "Alabama",
    43.                   "value": 25
    44.                 }
    45.               ]
    46.             },
    47.             {
    48.               "text": "Canada",
    49.               "value": 113
    50.             },
    51.             {
    52.               "text": "Mexico",
    53.               "value": 78
    54.             }
    55.           ]
    56.         },
    57.         {
    58.           "text": "Europe",
    59.           "children": [{
    60.               "text": "France",
    61.               "value": 42
    62.             },
    63.             {
    64.               "text": "Spain",
    65.               "value": 28
    66.             },
    67.             {
    68.               "text": "Switzerland",
    69.               "value": 13
    70.             },
    71.             {
    72.               "text": "Germany",
    73.               "value": 56
    74.             },
    75.             {
    76.               "text": "Cyprus",
    77.               "value": 7
    78.             }
    79.           ]
    80.         },
    81.         {
    82.           "text": "Africa",
    83.           "children": [{
    84.               "text": "Egypt",
    85.               "value": 22
    86.             },
    87.             {
    88.               "text": "Congo",
    89.               "value": 38
    90.             },
    91.             {
    92.               "text": "Lesotho",
    93.               "value": 9
    94.             }
    95.           ]
    96.         },
    97.         {
    98.           "text": "Asia",
    99.           "children": [{
    100.               "text": "India",
    101.               "value": 92
    102.             },
    103.             {
    104.               "text": "China",
    105.               "value": 68
    106.             },
    107.             {
    108.               "text": "Mongolia",
    109.               "value": 25
    110.             }
    111.           ]
    112.         },
    113.         {
    114.           "text": "South America",
    115.           "children": [{
    116.               "text": "Brazil",
    117.               "value": 42
    118.             },
    119.             {
    120.               "text": "Argentina",
    121.               "value": 28
    122.             },
    123.             {
    124.               "text": "Peru",
    125.               "value": 15
    126.             },
    127.             {
    128.               "text": "Uruguay",
    129.               "value": 33
    130.             }
    131.           ]
    132.         },
    133.         {
    134.           "text": "Australia (continent)",
    135.           "children": [{
    136.               "text": "Australia (country)",
    137.               "value": 121
    138.             },
    139.             {
    140.               "text": "New Zealand",
    141.               "value": 24
    142.             }
    143.           ]
    144.         }
    145.       ]
    146.     }]
    147.   };
    148.  
    149.   // render chart with width and height to
    150.   // fill the parent container CSS dimensions
    151.   zingchart.render({
    152.     id: 'myChart',
    153.     data: chartConfig,
    154.     height: '100%',
    155.     width: '100%',
    156.   });
    157. });