• Edit
  • Download
  • <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      <style>
        @import 'https://fonts.googleapis.com/css?family=Montserrat';
        @import 'https://fonts.googleapis.com/css?family=Lato:400';
        .zc-body {
          background-color: #FBFCFE;
        }
    
        .chart--container {
          background-color: #FBFCFE;
          min-height: 530px;
          width: 100%;
          height: 100%;
        }
    
        .inline {
          display: inline-block;
        }
    
        .controls {
          width: 200px;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          bottom: 75px;
          text-align: center;
        }
    
        .zc-ref {
          display: none;
        }
      </style>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
      <div class="controls">
        <input id='updateChart' type='range' min='0' max='160' value='55' class='inline' />
        <div id='output' class='inline'>55</div>
      </div>
      <script>
        ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
        let chartConfig = {
          type: 'gauge',
          backgroundColor: 'none',
          plot: {
            tooltip: {
              visible: false
            },
            aperture: 180,
            backgroundColor: 'none',
            csize: '4px'
          },
          plotarea: {
            margin: '100px 0px 0px 0px',
            backgroundColor: 'none',
            borderWidth: '0px'
          },
          scaleR: {
            aperture: 180,
            backgroundColor: 'none',
            center: {
              backgroundColor: 'none',
              borderColor: 'none',
              size: '0px'
            },
            item: {
              padding: '5px',
              fontColor: '#1E5D9E',
              fontFamily: 'Montserrat',
              offsetR: 0
            },
            maxValue: 160,
            minValue: 0,
            ring: {
              rules: [{
                  backgroundColor: '#00BAF2',
                  rule: '%v < 40'
                },
                {
                  backgroundColor: '#1E5D9E',
                  rule: '%v >= 40 && %v < 80'
                },
                {
                  backgroundColor: '#9B26AF',
                  rule: '%v >= 80 && %v < 120'
                },
                {
                  backgroundColor: '#E80C60',
                  rule: '%v >= 120'
                }
              ],
              size: '3px'
            },
            step: 20,
            tick: {
              lineColor: '#1E5D9E',
              placement: 'out'
            }
          },
          series: [{
            text: 'Internal',
            values: [55],
            backgroundColor: '#1E5D9E',
            lineColor: '#00BAF2'
          }]
        };
    
        zingchart.render({
          id: 'myChart',
          data: chartConfig,
          height: '100%',
          width: '100%',
        });
    
        /*
         * assign event listener 
         */
        document.getElementById('updateChart').addEventListener('input', (e) => {
          let inputValue = e.currentTarget.value;
          document.getElementById('output').textContent = inputValue;
    
          // update the value of the chart using zingchart API 
          zingchart.exec('myChart', 'setseriesvalues', {
            plotindex: 0,
            values: [parseInt(inputValue)]
          });
        });
      </script>
    </body>
    
    </html>
    <!doctype html>
    <html class="zc-html">
    
    <head>
      <meta charset="utf-8">
      <title>ZingSoft Demo</title>
      <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    ​
    
    <body class="zc-body">
      ​
      <div id="myChart" class="chart--container">
        <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
      </div>
      <div class="controls">
        <input id='updateChart' type='range' min='0' max='160' value='55' class='inline' />
        <div id='output' class='inline'>55</div>
      </div>
    </body>
    
    </html>
    @import 'https://fonts.googleapis.com/css?family=Montserrat';
    @import 'https://fonts.googleapis.com/css?family=Lato:400';
    .zc-body {
      background-color: #FBFCFE;
    }
    
    .chart--container {
      background-color: #FBFCFE;
      min-height: 530px;
      width: 100%;
      height: 100%;
    }
    
    .inline {
      display: inline-block;
    }
    
    .controls {
      width: 200px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      bottom: 75px;
      text-align: center;
    }
    
    .zc-ref {
      display: none;
    }
    let chartConfig = {
      type: 'gauge',
      backgroundColor: 'none',
      plot: {
        tooltip: {
          visible: false
        },
        aperture: 180,
        backgroundColor: 'none',
        csize: '4px'
      },
      plotarea: {
        margin: '100px 0px 0px 0px',
        backgroundColor: 'none',
        borderWidth: '0px'
      },
      scaleR: {
        aperture: 180,
        backgroundColor: 'none',
        center: {
          backgroundColor: 'none',
          borderColor: 'none',
          size: '0px'
        },
        item: {
          padding: '5px',
          fontColor: '#1E5D9E',
          fontFamily: 'Montserrat',
          offsetR: 0
        },
        maxValue: 160,
        minValue: 0,
        ring: {
          rules: [{
              backgroundColor: '#00BAF2',
              rule: '%v < 40'
            },
            {
              backgroundColor: '#1E5D9E',
              rule: '%v >= 40 && %v < 80'
            },
            {
              backgroundColor: '#9B26AF',
              rule: '%v >= 80 && %v < 120'
            },
            {
              backgroundColor: '#E80C60',
              rule: '%v >= 120'
            }
          ],
          size: '3px'
        },
        step: 20,
        tick: {
          lineColor: '#1E5D9E',
          placement: 'out'
        }
      },
      series: [{
        text: 'Internal',
        values: [55],
        backgroundColor: '#1E5D9E',
        lineColor: '#00BAF2'
      }]
    };
    
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
    
    /*
     * assign event listener 
     */
    document.getElementById('updateChart').addEventListener('input', (e) => {
      let inputValue = e.currentTarget.value;
      document.getElementById('output').textContent = inputValue;
    
      // update the value of the chart using zingchart API 
      zingchart.exec('myChart', 'setseriesvalues', {
        plotindex: 0,
        values: [parseInt(inputValue)]
      });
    });