• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .zc-html,
    10.     .zc-body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       height: 100%;
    19.       width: 100%;
    20.       min-height: 530px;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zc-body">
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.  
    40.       // full ZingChart schema can be found here:
    41.       // https://www.zingchart.com/docs/api/json-configuration/
    42.       let chartConfig = {
    43.         "backgroundColor": "#eeeeee",
    44.         "type": "gauge",
    45.         "plot": {
    46.           "offsetY": 120,
    47.           "valueBox": {
    48.             "text": "%v",
    49.             "placement": "center",
    50.             "rules": [{
    51.                 "text": "%v<br>EXCELLENT",
    52.                 "rule": "%v >= 700"
    53.               },
    54.               {
    55.                 "text": "%v<br>Good",
    56.                 "rule": "%v < 700 && %v > 640"
    57.               },
    58.               {
    59.                 "text": "%v<br>Fair",
    60.                 "rule": "%v < 640 && %v > 580"
    61.               },
    62.               {
    63.                 "text": "%v<br>Bad",
    64.                 "rule": "%v <  580"
    65.               }
    66.             ]
    67.           },
    68.           "size": "100%"
    69.         },
    70.         "plotarea": {
    71.           "margin": 0
    72.         },
    73.         "scale": {
    74.           "sizeFactor": 1.5
    75.         },
    76.         "scaleR": {
    77.           "offsetY": 120,
    78.           "aperture": 180,
    79.           "center": {
    80.             "visible": false
    81.           },
    82.           "item": {
    83.             "offsetY": 120,
    84.             "offsetR": 0,
    85.             "rules": [{
    86.               "offsetX": "15px",
    87.               "rule": "%i == 9"
    88.             }]
    89.           },
    90.           "labels": ["300", "", "", "", "", "", "580", "640", "700", "750", "", "850"],
    91.           "maxValue": 850,
    92.           "minValue": 300,
    93.           "ring": {
    94.             "offsetY": 120,
    95.             "rules": [{
    96.                 "backgroundColor": "#E53935",
    97.                 "rule": "%v <= 580"
    98.               },
    99.               {
    100.                 "backgroundColor": "#EF5350",
    101.                 "rule": "%v > 580 && %v < 640"
    102.               },
    103.               {
    104.                 "backgroundColor": "#FFA726",
    105.                 "rule": "%v >= 640 && %v < 700"
    106.               },
    107.               {
    108.                 "backgroundColor": "#29B6F6",
    109.                 "rule": "%v >= 700"
    110.               }
    111.             ],
    112.             "size": "45px"
    113.           },
    114.           "step": 50,
    115.           "tick": {
    116.             "visible": false
    117.           }
    118.         },
    119.         "tooltip": {
    120.           "borderRadius": "5px"
    121.         },
    122.         "series": [{
    123.           "values": [755],
    124.           "backgroundColor": "black",
    125.           "indicator": [4, 4, 4, 4, 0.75],
    126.           "animation": {
    127.             "effect": "ANIMATION_EXPAND_VERTICAL",
    128.             "method": "ANIMATION_BACK_EASE_OUT",
    129.             "speed": 900
    130.           }
    131.         }]
    132.       };
    133.  
    134.       // render chart
    135.       zingchart.render({
    136.         id: 'myChart',
    137.         data: chartConfig,
    138.         height: 300,
    139.         width: '100%',
    140.       });
    141.     });
    142.   </script>
    143. </body>
    144.  
    145. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. .zc-html,
    2. .zc-body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 530px;
    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.   // Javascript code to execute after DOM content
    5.  
    6.   // full ZingChart schema can be found here:
    7.   // https://www.zingchart.com/docs/api/json-configuration/
    8.   let chartConfig = {
    9.     "backgroundColor": "#eeeeee",
    10.     "type": "gauge",
    11.     "plot": {
    12.       "offsetY": 120,
    13.       "valueBox": {
    14.         "text": "%v",
    15.         "placement": "center",
    16.         "rules": [{
    17.             "text": "%v<br>EXCELLENT",
    18.             "rule": "%v >= 700"
    19.           },
    20.           {
    21.             "text": "%v<br>Good",
    22.             "rule": "%v < 700 && %v > 640"
    23.           },
    24.           {
    25.             "text": "%v<br>Fair",
    26.             "rule": "%v < 640 && %v > 580"
    27.           },
    28.           {
    29.             "text": "%v<br>Bad",
    30.             "rule": "%v <  580"
    31.           }
    32.         ]
    33.       },
    34.       "size": "100%"
    35.     },
    36.     "plotarea": {
    37.       "margin": 0
    38.     },
    39.     "scale": {
    40.       "sizeFactor": 1.5
    41.     },
    42.     "scaleR": {
    43.       "offsetY": 120,
    44.       "aperture": 180,
    45.       "center": {
    46.         "visible": false
    47.       },
    48.       "item": {
    49.         "offsetY": 120,
    50.         "offsetR": 0,
    51.         "rules": [{
    52.           "offsetX": "15px",
    53.           "rule": "%i == 9"
    54.         }]
    55.       },
    56.       "labels": ["300", "", "", "", "", "", "580", "640", "700", "750", "", "850"],
    57.       "maxValue": 850,
    58.       "minValue": 300,
    59.       "ring": {
    60.         "offsetY": 120,
    61.         "rules": [{
    62.             "backgroundColor": "#E53935",
    63.             "rule": "%v <= 580"
    64.           },
    65.           {
    66.             "backgroundColor": "#EF5350",
    67.             "rule": "%v > 580 && %v < 640"
    68.           },
    69.           {
    70.             "backgroundColor": "#FFA726",
    71.             "rule": "%v >= 640 && %v < 700"
    72.           },
    73.           {
    74.             "backgroundColor": "#29B6F6",
    75.             "rule": "%v >= 700"
    76.           }
    77.         ],
    78.         "size": "45px"
    79.       },
    80.       "step": 50,
    81.       "tick": {
    82.         "visible": false
    83.       }
    84.     },
    85.     "tooltip": {
    86.       "borderRadius": "5px"
    87.     },
    88.     "series": [{
    89.       "values": [755],
    90.       "backgroundColor": "black",
    91.       "indicator": [4, 4, 4, 4, 0.75],
    92.       "animation": {
    93.         "effect": "ANIMATION_EXPAND_VERTICAL",
    94.         "method": "ANIMATION_BACK_EASE_OUT",
    95.         "speed": 900
    96.       }
    97.     }]
    98.   };
    99.  
    100.   // render chart
    101.   zingchart.render({
    102.     id: 'myChart',
    103.     data: chartConfig,
    104.     height: 300,
    105.     width: '100%',
    106.   });
    107. });