Angular Gauge with Range Input

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/ZEXN86JL

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" 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,
        },
        backgroundColor: 'none',
        csize: '4px',
      },
      plotarea: {
        backgroundColor: 'none',
        borderWidth: '0px',
        margin: '100px 0px 0px 0px',
      },
      scaleR: {
        aperture: 180,
        backgroundColor: 'none',
        center: {
          backgroundColor: 'none',
          borderColor: 'none',
          size: '0px',
        },
        item: {
          fontColor: '#1E5D9E',
          fontFamily: 'Montserrat',
          offsetR: 0,
          padding: '5px',
        },
        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>

let chartConfig = {
  type: 'gauge',
  backgroundColor: 'none',
  plot: {
    tooltip: {
      visible: false,
    },
    backgroundColor: 'none',
    csize: '4px',
  },
  plotarea: {
    backgroundColor: 'none',
    borderWidth: '0px',
    margin: '100px 0px 0px 0px',
  },
  scaleR: {
    aperture: 180,
    backgroundColor: 'none',
    center: {
      backgroundColor: 'none',
      borderColor: 'none',
      size: '0px',
    },
    item: {
      fontColor: '#1E5D9E',
      fontFamily: 'Montserrat',
      offsetR: 0,
      padding: '5px',
    },
    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)],
  });
});

@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;
}

Time Series Chart with Zoom Controls 157/281 Bubble Chart with Zooming Preview

Angular Gauge with Range Input

Related Documentation: