• 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.   <!-- IMPORT Javascript variable -->
    10.   <script nonce="undefined" src="https://cdn.zingchart.com/themes/vividTheme.js"></script>
    11.   <style>
    12.     html,
    13.     body {
    14.       height: 100%;
    15.       width: 100%;
    16.       margin: 0;
    17.       padding: 0;
    18.     }
    19.  
    20.     .main--container {
    21.       width: '100%';
    22.       height: '100%';
    23.       min-height: 1000px;
    24.       display: flex;
    25.       flex-direction: column;
    26.     }
    27.  
    28.     .row {
    29.       display: flex;
    30.       flex-direction: row;
    31.       flex-grow: 1;
    32.       height: 100%;
    33.     }
    34.  
    35.     .chart--container {
    36.       height: 100%;
    37.       width: 100%;
    38.       min-height: 500px;
    39.     }
    40.  
    41.     .zc-ref {
    42.       display: none;
    43.     }
    44.   </style>
    45. </head>
    46.  
    47. <body>
    48.   <select>
    49.     <option value="light">light</option>
    50.     <option value="dark">dark</option>
    51.     <option value="classic">classic</option>
    52.     <option value="spark">spark</option>
    53.     <option value="vivid" selected>vivid</option>
    54.   </select>
    55.   <div class="main--container">
    56.     <div class="row">
    57.       <div id="barChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    58.       <div id="rangeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    59.       <div id="areaChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    60.       <div id="treeMap" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    61.     </div>
    62.     <div class="row">
    63.       <div id="pieChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    64.       <div id="mapChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    65.       <div id="gaugeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    66.       <div id="radarChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    67.     </div>
    68.   </div>
    69.   <script>
    70.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    71.     // because this Javascript is injected into the document head
    72.     window.addEventListener('load', () => {
    73.       // Javascript code to execute after DOM content
    74.  
    75.       function renderChart(id, data, theme) {
    76.         zingchart.exec(id, 'destroy');
    77.  
    78.         let renderObject = {
    79.           id,
    80.           data,
    81.           height: '100%',
    82.           width: '100%',
    83.           theme: theme ? theme : ''
    84.         };
    85.  
    86.         // variable "vividTheme" is pulled in script tag. Check HTML
    87.         if (theme === 'vivid') renderObject.defaults = vividTheme;
    88.  
    89.         // render chart with width and height to
    90.         // fill the parent container CSS dimensions
    91.         zingchart.render(renderObject);
    92.       }
    93.  
    94.       function renderAllCharts(theme) {
    95.         renderChart('barChart', barConfig, theme);
    96.         renderChart('rangeChart', rangeConfig, theme);
    97.         renderChart('areaChart', areaConfig, theme);
    98.         renderChart('treeMap', treeConfig, theme);
    99.         renderChart('pieChart', pieConfig, theme);
    100.         renderChart('mapChart', mapConfig, theme);
    101.         renderChart('gaugeChart', gaugeConfig, theme);
    102.         renderChart('radarChart', radarConfig, theme);
    103.       }
    104.  
    105.       let selectDropdown = document.querySelector('select');
    106.       selectDropdown.addEventListener('change', function(e) {
    107.         renderAllCharts(e.target.value);
    108.       });
    109.       // full ZingChart schema can be found here:
    110.       // https://www.zingchart.com/docs/api/json-configuration/
    111.       let barConfig = {
    112.         type: 'bar',
    113.         plot: {
    114.           stacked: true
    115.         },
    116.         legend: {},
    117.         scaleX: {
    118.           values: ['Cats', 'Dogs', 'Fish', 'Birds'],
    119.           guide: {
    120.             visible: false
    121.           },
    122.           lineColor: 'none',
    123.           lineWidth: '0px',
    124.           tick: {
    125.             visible: false
    126.           }
    127.         },
    128.         scaleY: {
    129.           guide: {
    130.             lineStyle: 'solid'
    131.           },
    132.           lineColor: 'none',
    133.           lineWidth: '0px',
    134.           maxValue: '495px',
    135.           minValue: '0px',
    136.           step: 123.75,
    137.           tick: {
    138.             visible: false
    139.           }
    140.         },
    141.         series: [{
    142.             values: [100, 180, 120, 120],
    143.           },
    144.           {
    145.             values: [125, 125, 125, 125],
    146.           },
    147.           {
    148.             values: [125, 145, 135, 165],
    149.           }
    150.         ]
    151.       };
    152.       let rangeConfig = {
    153.         type: 'range',
    154.         title: {
    155.           text: 'A Simple Area Chart',
    156.         },
    157.         legend: {},
    158.         scaleX: {
    159.           // set scale label
    160.           label: {
    161.             text: 'Days'
    162.           },
    163.           // convert text on scale indices
    164.           labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    165.         },
    166.         scaleY: {
    167.           // scale label with unicode character
    168.           label: {
    169.             text: 'Temperature (°F)'
    170.           }
    171.         },
    172.         series: [{
    173.             text: 'Week 1',
    174.             values: [
    175.               [15, 30],
    176.               [20, 40],
    177.               [16, 35],
    178.               [21, 30],
    179.               [25, 45],
    180.               [18, 27],
    181.               [23, 35],
    182.               [29, 39],
    183.               [27, 30],
    184.               [19, 34]
    185.             ],
    186.           },
    187.           {
    188.             text: 'Week 2',
    189.             values: [
    190.               [40, 45],
    191.               [30, 43],
    192.               [35, 36],
    193.               [41, 50],
    194.               [50, 54],
    195.               [45, 52],
    196.               [39, 42],
    197.               [31, 40],
    198.               [41, 49],
    199.               [35, 40]
    200.             ],
    201.           }
    202.         ]
    203.       };
    204.       let areaConfig = {
    205.         "type": "area",
    206.         "title": {
    207.           "text": "Customer Survey Response Quality",
    208.           "text-align": "center",
    209.           "adjust-layout": true
    210.         },
    211.         "plotarea": {
    212.           "margin": "dynamic"
    213.         },
    214.         "scale-x": {
    215.           "values": [
    216.             "Jan",
    217.             "Feb",
    218.             "Mar",
    219.             "Apr",
    220.             "May",
    221.             "Jun",
    222.             "Jul",
    223.             "Aug",
    224.             "Sept",
    225.             "Oct",
    226.             "Nov",
    227.             "Dec"
    228.           ],
    229.           "label": {
    230.             "text": "Surveys per Month",
    231.           },
    232.           "maxTicks": 4,
    233.           "maxItems": 4
    234.         },
    235.         "scale-y": {
    236.           "min-value": 0,
    237.           "max-value": 100,
    238.           "step": 20,
    239.           "format": "%v%",
    240.           "label": {
    241.             "text": "Surveys per Quality Guidelines",
    242.           },
    243.         },
    244.         "plot": {
    245.           "stacked": true,
    246.           "stack-type": "100%",
    247.         },
    248.         "legend": {},
    249.         "series": [{
    250.             "values": [
    251.               116,
    252.               125,
    253.               109,
    254.               86,
    255.               76,
    256.               95,
    257.               85,
    258.               77,
    259.               101,
    260.               90,
    261.               87,
    262.               62
    263.             ],
    264.             "text": "Poor",
    265.           },
    266.           {
    267.             "values": [
    268.               195,
    269.               206,
    270.               215,
    271.               140,
    272.               185,
    273.               176,
    274.               184,
    275.               190,
    276.               110,
    277.               174,
    278.               155,
    279.               165
    280.             ],
    281.             "text": "Moderate",
    282.           },
    283.           {
    284.             "values": [
    285.               223,
    286.               284,
    287.               268,
    288.               274,
    289.               230,
    290.               199,
    291.               185,
    292.               208,
    293.               248,
    294.               295,
    295.               210,
    296.               225
    297.             ],
    298.             "text": "Good",
    299.           },
    300.           {
    301.             "values": [
    302.               185,
    303.               175,
    304.               168,
    305.               154,
    306.               198,
    307.               175,
    308.               124,
    309.               145,
    310.               168,
    311.               174,
    312.               154,
    313.               125
    314.             ],
    315.             "text": "Excellent",
    316.           }
    317.         ]
    318.       };
    319.       let treeConfig = {
    320.         "type": "treemap",
    321.         "plotarea": {
    322.           "margin": "0 0 30 0"
    323.         },
    324.         "tooltip": {
    325.  
    326.         },
    327.         "options": {
    328.  
    329.         },
    330.         "series": [{
    331.             "text": "North America",
    332.             "children": [{
    333.                 "text": "United States",
    334.                 "children": [{
    335.                     "text": "Texas",
    336.                     "value": 21
    337.                   },
    338.                   {
    339.                     "text": "California",
    340.                     "value": 53
    341.                   },
    342.                   {
    343.                     "text": "Ohio",
    344.                     "value": 12
    345.                   },
    346.                   {
    347.                     "text": "New York",
    348.                     "value": 46
    349.                   },
    350.                   {
    351.                     "text": "Michigan",
    352.                     "value": 39
    353.                   },
    354.                   {
    355.                     "text": "Alabama",
    356.                     "value": 25
    357.                   }
    358.                 ]
    359.               },
    360.               {
    361.                 "text": "Canada",
    362.                 "value": 113
    363.               },
    364.               {
    365.                 "text": "Mexico",
    366.                 "value": 78
    367.               }
    368.             ]
    369.           },
    370.           {
    371.             "text": "Europe",
    372.             "children": [{
    373.                 "text": "France",
    374.                 "value": 42
    375.               },
    376.               {
    377.                 "text": "Spain",
    378.                 "value": 28
    379.               },
    380.               {
    381.                 "text": "Switzerland",
    382.                 "value": 13
    383.               },
    384.               {
    385.                 "text": "Germany",
    386.                 "value": 56
    387.               },
    388.               {
    389.                 "text": "Cyprus",
    390.                 "value": 7
    391.               }
    392.             ]
    393.           },
    394.           {
    395.             "text": "Africa",
    396.             "children": [{
    397.                 "text": "Egypt",
    398.                 "value": 22
    399.               },
    400.               {
    401.                 "text": "Congo",
    402.                 "value": 38
    403.               },
    404.               {
    405.                 "text": "Lesotho",
    406.                 "value": 9
    407.               }
    408.             ]
    409.           },
    410.           {
    411.             "text": "Asia",
    412.             "children": [{
    413.                 "text": "India",
    414.                 "value": 92
    415.               },
    416.               {
    417.                 "text": "China",
    418.                 "value": 68
    419.               },
    420.               {
    421.                 "text": "Mongolia",
    422.                 "value": 25
    423.               }
    424.             ]
    425.           },
    426.           {
    427.             "text": "South America",
    428.             "children": [{
    429.                 "text": "Brazil",
    430.                 "value": 42
    431.               },
    432.               {
    433.                 "text": "Argentina",
    434.                 "value": 28
    435.               },
    436.               {
    437.                 "text": "Peru",
    438.                 "value": 15
    439.               },
    440.               {
    441.                 "text": "Uruguay",
    442.                 "value": 33
    443.               }
    444.             ]
    445.           },
    446.           {
    447.             "text": "Australia (continent)",
    448.             "children": [{
    449.                 "text": "Australia (country)",
    450.                 "value": 121
    451.               },
    452.               {
    453.                 "text": "New Zealand",
    454.                 "value": 24
    455.               }
    456.             ]
    457.           }
    458.         ]
    459.       };
    460.       let pieConfig = {
    461.         type: 'pie',
    462.         title: {
    463.           text: 'Custom Theme'
    464.         },
    465.         legend: {},
    466.         shapes: {
    467.           type: 'triangle'
    468.         },
    469.         series: [{
    470.             values: [35]
    471.           },
    472.           {
    473.             values: [135]
    474.           },
    475.           {
    476.             values: [135]
    477.           },
    478.           {
    479.             values: [135]
    480.           },
    481.           {
    482.             values: [135]
    483.           }
    484.         ]
    485.       };
    486.       let mapConfig = {
    487.         type: 'heatmap',
    488.         title: {
    489.           text: 'A Simple Heatmap Chart',
    490.         },
    491.         legend: {
    492.           draggable: true,
    493.           // don't allow removing of plots. Just display legend text
    494.           toggleAction: 'none'
    495.         },
    496.         scaleX: {
    497.           // set scale label
    498.           label: {
    499.             text: 'Days'
    500.           },
    501.           // convert text on scale indices
    502.           labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    503.         },
    504.         scaleY: {
    505.           // scale label with unicode character
    506.           label: {
    507.             text: 'Temperature (°F)'
    508.           }
    509.         },
    510.         series: [{
    511.             text: 'Week 1',
    512.             values: [59, 15, 5, 30, 60, 99, 28]
    513.           },
    514.           {
    515.             text: 'Week 2',
    516.             values: [34, 32, 87, 65, 9, 17, 40]
    517.           },
    518.           {
    519.             text: 'Week 3',
    520.             values: [90, 19, 50, 39, 12, 49, 14]
    521.           }
    522.         ]
    523.       };
    524.       let gaugeConfig = {
    525.         type: 'gauge',
    526.         title: {
    527.           text: 'A Simple Gauge Chart',
    528.         },
    529.         legend: {},
    530.         scaleR: {
    531.  
    532.         },
    533.         series: [{
    534.             text: 'Day 1',
    535.             // plot values
    536.             values: [23],
    537.           },
    538.           {
    539.             text: 'Day 2',
    540.             // plot values
    541.             values: [20],
    542.           },
    543.           {
    544.             text: 'Day 3',
    545.             // plot values
    546.             values: [25],
    547.           }
    548.         ]
    549.       };
    550.       let radarConfig = {
    551.         type: 'radar',
    552.         plot: {
    553.           aspect: 'area',
    554.         },
    555.         plotarea: {
    556.           margin: 'dynamic'
    557.         },
    558.         scaleK: {
    559.           values: '0:330:30',
    560.           aspect: 'circle', // To set the chart shape to circular.
    561.           format: '%v°',
    562.         },
    563.         scaleV: {
    564.           values: '0:100:25',
    565.           labels: ['', '', '', '', ''],
    566.         },
    567.         series: [{
    568.             values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
    569.           },
    570.           {
    571.             values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
    572.           },
    573.           {
    574.             values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
    575.           }
    576.         ]
    577.       };
    578.  
    579.       renderAllCharts('vivid');
    580.     });
    581.   </script>
    582. </body>
    583.  
    584. </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.   <!-- IMPORT Javascript variable -->
    10.   <script src="https://cdn.zingchart.com/themes/vividTheme.js"></script>
    11. </head>
    12.  
    13. <body>
    14.   <select>
    15.     <option value="light">light</option>
    16.     <option value="dark">dark</option>
    17.     <option value="classic">classic</option>
    18.     <option value="spark">spark</option>
    19.     <option value="vivid" selected>vivid</option>
    20.   </select>
    21.   <div class="main--container">
    22.     <div class="row">
    23.       <div id="barChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    24.       <div id="rangeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    25.       <div id="areaChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    26.       <div id="treeMap" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    27.     </div>
    28.     <div class="row">
    29.       <div id="pieChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    30.       <div id="mapChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    31.       <div id="gaugeChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.       <div id="radarChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    33.     </div>
    34.   </div>
    35. </body>
    36.  
    37. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .main--container {
    10.   width: '100%';
    11.   height: '100%';
    12.   min-height: 1000px;
    13.   display: flex;
    14.   flex-direction: column;
    15. }
    16.  
    17. .row {
    18.   display: flex;
    19.   flex-direction: row;
    20.   flex-grow: 1;
    21.   height: 100%;
    22. }
    23.  
    24. .chart--container {
    25.   height: 100%;
    26.   width: 100%;
    27.   min-height: 500px;
    28. }
    29.  
    30. .zc-ref {
    31.   display: none;
    32. }
    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.   // Javascript code to execute after DOM content
    5.  
    6.   function renderChart(id, data, theme) {
    7.     zingchart.exec(id, 'destroy');
    8.  
    9.     let renderObject = {
    10.       id,
    11.       data,
    12.       height: '100%',
    13.       width: '100%',
    14.       theme: theme ? theme : ''
    15.     };
    16.  
    17.     // variable "vividTheme" is pulled in script tag. Check HTML
    18.     if (theme === 'vivid') renderObject.defaults = vividTheme;
    19.  
    20.     // render chart with width and height to
    21.     // fill the parent container CSS dimensions
    22.     zingchart.render(renderObject);
    23.   }
    24.  
    25.   function renderAllCharts(theme) {
    26.     renderChart('barChart', barConfig, theme);
    27.     renderChart('rangeChart', rangeConfig, theme);
    28.     renderChart('areaChart', areaConfig, theme);
    29.     renderChart('treeMap', treeConfig, theme);
    30.     renderChart('pieChart', pieConfig, theme);
    31.     renderChart('mapChart', mapConfig, theme);
    32.     renderChart('gaugeChart', gaugeConfig, theme);
    33.     renderChart('radarChart', radarConfig, theme);
    34.   }
    35.  
    36.   let selectDropdown = document.querySelector('select');
    37.   selectDropdown.addEventListener('change', function(e) {
    38.     renderAllCharts(e.target.value);
    39.   });
    40.   // full ZingChart schema can be found here:
    41.   // https://www.zingchart.com/docs/api/json-configuration/
    42.   let barConfig = {
    43.     type: 'bar',
    44.     plot: {
    45.       stacked: true
    46.     },
    47.     legend: {},
    48.     scaleX: {
    49.       values: ['Cats', 'Dogs', 'Fish', 'Birds'],
    50.       guide: {
    51.         visible: false
    52.       },
    53.       lineColor: 'none',
    54.       lineWidth: '0px',
    55.       tick: {
    56.         visible: false
    57.       }
    58.     },
    59.     scaleY: {
    60.       guide: {
    61.         lineStyle: 'solid'
    62.       },
    63.       lineColor: 'none',
    64.       lineWidth: '0px',
    65.       maxValue: '495px',
    66.       minValue: '0px',
    67.       step: 123.75,
    68.       tick: {
    69.         visible: false
    70.       }
    71.     },
    72.     series: [{
    73.         values: [100, 180, 120, 120],
    74.       },
    75.       {
    76.         values: [125, 125, 125, 125],
    77.       },
    78.       {
    79.         values: [125, 145, 135, 165],
    80.       }
    81.     ]
    82.   };
    83.   let rangeConfig = {
    84.     type: 'range',
    85.     title: {
    86.       text: 'A Simple Area Chart',
    87.     },
    88.     legend: {},
    89.     scaleX: {
    90.       // set scale label
    91.       label: {
    92.         text: 'Days'
    93.       },
    94.       // convert text on scale indices
    95.       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    96.     },
    97.     scaleY: {
    98.       // scale label with unicode character
    99.       label: {
    100.         text: 'Temperature (°F)'
    101.       }
    102.     },
    103.     series: [{
    104.         text: 'Week 1',
    105.         values: [
    106.           [15, 30],
    107.           [20, 40],
    108.           [16, 35],
    109.           [21, 30],
    110.           [25, 45],
    111.           [18, 27],
    112.           [23, 35],
    113.           [29, 39],
    114.           [27, 30],
    115.           [19, 34]
    116.         ],
    117.       },
    118.       {
    119.         text: 'Week 2',
    120.         values: [
    121.           [40, 45],
    122.           [30, 43],
    123.           [35, 36],
    124.           [41, 50],
    125.           [50, 54],
    126.           [45, 52],
    127.           [39, 42],
    128.           [31, 40],
    129.           [41, 49],
    130.           [35, 40]
    131.         ],
    132.       }
    133.     ]
    134.   };
    135.   let areaConfig = {
    136.     "type": "area",
    137.     "title": {
    138.       "text": "Customer Survey Response Quality",
    139.       "text-align": "center",
    140.       "adjust-layout": true
    141.     },
    142.     "plotarea": {
    143.       "margin": "dynamic"
    144.     },
    145.     "scale-x": {
    146.       "values": [
    147.         "Jan",
    148.         "Feb",
    149.         "Mar",
    150.         "Apr",
    151.         "May",
    152.         "Jun",
    153.         "Jul",
    154.         "Aug",
    155.         "Sept",
    156.         "Oct",
    157.         "Nov",
    158.         "Dec"
    159.       ],
    160.       "label": {
    161.         "text": "Surveys per Month",
    162.       },
    163.       "maxTicks": 4,
    164.       "maxItems": 4
    165.     },
    166.     "scale-y": {
    167.       "min-value": 0,
    168.       "max-value": 100,
    169.       "step": 20,
    170.       "format": "%v%",
    171.       "label": {
    172.         "text": "Surveys per Quality Guidelines",
    173.       },
    174.     },
    175.     "plot": {
    176.       "stacked": true,
    177.       "stack-type": "100%",
    178.     },
    179.     "legend": {},
    180.     "series": [{
    181.         "values": [
    182.           116,
    183.           125,
    184.           109,
    185.           86,
    186.           76,
    187.           95,
    188.           85,
    189.           77,
    190.           101,
    191.           90,
    192.           87,
    193.           62
    194.         ],
    195.         "text": "Poor",
    196.       },
    197.       {
    198.         "values": [
    199.           195,
    200.           206,
    201.           215,
    202.           140,
    203.           185,
    204.           176,
    205.           184,
    206.           190,
    207.           110,
    208.           174,
    209.           155,
    210.           165
    211.         ],
    212.         "text": "Moderate",
    213.       },
    214.       {
    215.         "values": [
    216.           223,
    217.           284,
    218.           268,
    219.           274,
    220.           230,
    221.           199,
    222.           185,
    223.           208,
    224.           248,
    225.           295,
    226.           210,
    227.           225
    228.         ],
    229.         "text": "Good",
    230.       },
    231.       {
    232.         "values": [
    233.           185,
    234.           175,
    235.           168,
    236.           154,
    237.           198,
    238.           175,
    239.           124,
    240.           145,
    241.           168,
    242.           174,
    243.           154,
    244.           125
    245.         ],
    246.         "text": "Excellent",
    247.       }
    248.     ]
    249.   };
    250.   let treeConfig = {
    251.     "type": "treemap",
    252.     "plotarea": {
    253.       "margin": "0 0 30 0"
    254.     },
    255.     "tooltip": {
    256.  
    257.     },
    258.     "options": {
    259.  
    260.     },
    261.     "series": [{
    262.         "text": "North America",
    263.         "children": [{
    264.             "text": "United States",
    265.             "children": [{
    266.                 "text": "Texas",
    267.                 "value": 21
    268.               },
    269.               {
    270.                 "text": "California",
    271.                 "value": 53
    272.               },
    273.               {
    274.                 "text": "Ohio",
    275.                 "value": 12
    276.               },
    277.               {
    278.                 "text": "New York",
    279.                 "value": 46
    280.               },
    281.               {
    282.                 "text": "Michigan",
    283.                 "value": 39
    284.               },
    285.               {
    286.                 "text": "Alabama",
    287.                 "value": 25
    288.               }
    289.             ]
    290.           },
    291.           {
    292.             "text": "Canada",
    293.             "value": 113
    294.           },
    295.           {
    296.             "text": "Mexico",
    297.             "value": 78
    298.           }
    299.         ]
    300.       },
    301.       {
    302.         "text": "Europe",
    303.         "children": [{
    304.             "text": "France",
    305.             "value": 42
    306.           },
    307.           {
    308.             "text": "Spain",
    309.             "value": 28
    310.           },
    311.           {
    312.             "text": "Switzerland",
    313.             "value": 13
    314.           },
    315.           {
    316.             "text": "Germany",
    317.             "value": 56
    318.           },
    319.           {
    320.             "text": "Cyprus",
    321.             "value": 7
    322.           }
    323.         ]
    324.       },
    325.       {
    326.         "text": "Africa",
    327.         "children": [{
    328.             "text": "Egypt",
    329.             "value": 22
    330.           },
    331.           {
    332.             "text": "Congo",
    333.             "value": 38
    334.           },
    335.           {
    336.             "text": "Lesotho",
    337.             "value": 9
    338.           }
    339.         ]
    340.       },
    341.       {
    342.         "text": "Asia",
    343.         "children": [{
    344.             "text": "India",
    345.             "value": 92
    346.           },
    347.           {
    348.             "text": "China",
    349.             "value": 68
    350.           },
    351.           {
    352.             "text": "Mongolia",
    353.             "value": 25
    354.           }
    355.         ]
    356.       },
    357.       {
    358.         "text": "South America",
    359.         "children": [{
    360.             "text": "Brazil",
    361.             "value": 42
    362.           },
    363.           {
    364.             "text": "Argentina",
    365.             "value": 28
    366.           },
    367.           {
    368.             "text": "Peru",
    369.             "value": 15
    370.           },
    371.           {
    372.             "text": "Uruguay",
    373.             "value": 33
    374.           }
    375.         ]
    376.       },
    377.       {
    378.         "text": "Australia (continent)",
    379.         "children": [{
    380.             "text": "Australia (country)",
    381.             "value": 121
    382.           },
    383.           {
    384.             "text": "New Zealand",
    385.             "value": 24
    386.           }
    387.         ]
    388.       }
    389.     ]
    390.   };
    391.   let pieConfig = {
    392.     type: 'pie',
    393.     title: {
    394.       text: 'Custom Theme'
    395.     },
    396.     legend: {},
    397.     shapes: {
    398.       type: 'triangle'
    399.     },
    400.     series: [{
    401.         values: [35]
    402.       },
    403.       {
    404.         values: [135]
    405.       },
    406.       {
    407.         values: [135]
    408.       },
    409.       {
    410.         values: [135]
    411.       },
    412.       {
    413.         values: [135]
    414.       }
    415.     ]
    416.   };
    417.   let mapConfig = {
    418.     type: 'heatmap',
    419.     title: {
    420.       text: 'A Simple Heatmap Chart',
    421.     },
    422.     legend: {
    423.       draggable: true,
    424.       // don't allow removing of plots. Just display legend text
    425.       toggleAction: 'none'
    426.     },
    427.     scaleX: {
    428.       // set scale label
    429.       label: {
    430.         text: 'Days'
    431.       },
    432.       // convert text on scale indices
    433.       labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    434.     },
    435.     scaleY: {
    436.       // scale label with unicode character
    437.       label: {
    438.         text: 'Temperature (°F)'
    439.       }
    440.     },
    441.     series: [{
    442.         text: 'Week 1',
    443.         values: [59, 15, 5, 30, 60, 99, 28]
    444.       },
    445.       {
    446.         text: 'Week 2',
    447.         values: [34, 32, 87, 65, 9, 17, 40]
    448.       },
    449.       {
    450.         text: 'Week 3',
    451.         values: [90, 19, 50, 39, 12, 49, 14]
    452.       }
    453.     ]
    454.   };
    455.   let gaugeConfig = {
    456.     type: 'gauge',
    457.     title: {
    458.       text: 'A Simple Gauge Chart',
    459.     },
    460.     legend: {},
    461.     scaleR: {
    462.  
    463.     },
    464.     series: [{
    465.         text: 'Day 1',
    466.         // plot values
    467.         values: [23],
    468.       },
    469.       {
    470.         text: 'Day 2',
    471.         // plot values
    472.         values: [20],
    473.       },
    474.       {
    475.         text: 'Day 3',
    476.         // plot values
    477.         values: [25],
    478.       }
    479.     ]
    480.   };
    481.   let radarConfig = {
    482.     type: 'radar',
    483.     plot: {
    484.       aspect: 'area',
    485.     },
    486.     plotarea: {
    487.       margin: 'dynamic'
    488.     },
    489.     scaleK: {
    490.       values: '0:330:30',
    491.       aspect: 'circle', // To set the chart shape to circular.
    492.       format: '%v°',
    493.     },
    494.     scaleV: {
    495.       values: '0:100:25',
    496.       labels: ['', '', '', '', ''],
    497.     },
    498.     series: [{
    499.         values: [59, 30, 65, 34, 40, 33, 31, 90, 81, 70, 100, 28],
    500.       },
    501.       {
    502.         values: [30, 100, 90, 99, 59, 34, 5, 3, 12, 15, 16, 75, 34],
    503.       },
    504.       {
    505.         values: [34, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 100],
    506.       }
    507.     ]
    508.   };
    509.  
    510.   renderAllCharts('vivid');
    511. });