• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
    8.   <script nonce="undefined">
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/hotfix/modules/";
    10.     ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11.   </script>
    12.  
    13.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    14.   <style>
    15.     html,
    16.     body {
    17.       height: 100%;
    18.       width: 100%;
    19.       margin: 0;
    20.       padding: 0;
    21.     }
    22.  
    23.     .chart--container {
    24.       height: 100%;
    25.       width: 100%;
    26.       min-height: 150px;
    27.     }
    28.  
    29.     .zc-ref {
    30.       display: none;
    31.     }
    32.   </style>
    33. </head>
    34.  
    35. <body>
    36.   <div id="myChart" class="chart--container">
    37.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    38.   </div>
    39.   <div id="myChart2" class="chart--container">
    40.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    41.   </div>
    42.   <script>
    43.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    44.     let chartConfig = {
    45.       type: 'gauge',
    46.       legend: {},
    47.       csv: {
    48.         url: 'https://cdn.zingchart.com/datasets/gauge-chart.csv'
    49.       },
    50.     };
    51.  
    52.     zingchart.render({
    53.       id: 'myChart',
    54.       data: chartConfig,
    55.       height: '100%',
    56.       width: '100%',
    57.       cacheControl: 'none'
    58.     });
    59.  
    60.     let chartConfig2 = {
    61.       type: 'gauge',
    62.       legend: {},
    63.       csv: {
    64.         url: 'https://cdn.zingchart.com/datasets/gauge-chart-multiple.csv'
    65.       },
    66.     };
    67.  
    68.     zingchart.render({
    69.       id: 'myChart2',
    70.       data: chartConfig2,
    71.       height: '100%',
    72.       width: '100%',
    73.       cacheControl: 'none'
    74.     });
    75.   </script>
    76. </body>
    77.  
    78. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>
    8.   <script>
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/hotfix/modules/";
    10.     ZC.LICENSE = ["b55b025e438fa8a98e32482b5f768ff5"];
    11.   </script>
    12.  
    13.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    14. </head>
    15.  
    16. <body>
    17.   <div id="myChart" class="chart--container">
    18.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    19.   </div>
    20.   <div id="myChart2" class="chart--container">
    21.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    22.   </div>
    23. </body>
    24.  
    25. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. let chartConfig = {
    2.   type: 'gauge',
    3.   legend: {},
    4.   csv: {
    5.     url: 'https://cdn.zingchart.com/datasets/gauge-chart.csv'
    6.   },
    7. };
    8.  
    9. zingchart.render({
    10.   id: 'myChart',
    11.   data: chartConfig,
    12.   height: '100%',
    13.   width: '100%',
    14.   cacheControl: 'none'
    15. });
    16.  
    17. let chartConfig2 = {
    18.   type: 'gauge',
    19.   legend: {},
    20.   csv: {
    21.     url: 'https://cdn.zingchart.com/datasets/gauge-chart-multiple.csv'
    22.   },
    23. };
    24.  
    25. zingchart.render({
    26.   id: 'myChart2',
    27.   data: chartConfig2,
    28.   height: '100%',
    29.   width: '100%',
    30.   cacheControl: 'none'
    31. });