Introduction to Gauge in JavaScript

A gauge is a graphical control element that represents a single data point within a range, typically from low to high. Gauges are commonly used in dashboards for real-time monitoring, allowing users to quickly assess key performance metrics. In this article, we will delve deep into the various APIs available for creating and controlling gauges in JavaScript, providing extensive code examples to get you started and to fully utilize the power of gauges in your applications.

Creating a Basic Gauge

To create a basic gauge, we need to initialize a gauge object and set its properties. Below is an example:

  
      // HTML
      

      // JavaScript
      var ctx = document.getElementById('gaugeCanvas').getContext('2d');
      var gauge = new Gauge(ctx).setOptions({ 
          angle: 0.15, 
          lineWidth: 0.44, 
          radiusScale: 1, 
          pointer: {
            length: 0.6, 
            strokeWidth: 0.035,
            color: '#000000'
          },
          staticZones: [
             {strokeStyle: "#F03E3E", min: 0, max: 30},
             {strokeStyle: "#FFDD00", min: 30, max: 60},
             {strokeStyle: "#30B32D", min: 60, max: 100}
          ], 
      });
      gauge.maxValue = 100; 
      gauge.setMinValue(0);  
      gauge.set(50); 
  

Updating Gauge Values

Here’s how you update the gauge value dynamically based on real-time data:

  
      function updateGauge(gauge, newValue) {
          gauge.set(newValue);
      }

      // Simulating update
      setInterval(function() {
          var value = Math.random() * 100;
          updateGauge(gauge, value);
      }, 1000);
  

Handling Gauge Events

You can handle events to update the gauge seamlessly:

  
      gauge.on('valueChange', function(newValue) {
          console.log('Gauge value changed to:' + newValue);
      });

      // Updating gauge value and triggering event
      gauge.set(70);
  

Advanced Gauge Customizations

For more customization, you can dive deeper into the options and settings:

  
      var gauge = new Gauge(ctx).setOptions({
          angle: 0, 
          lineWidth: 0.2, 
          radiusScale: 0.9, 
          pointer: {
              length: 0.7,
              strokeWidth: 0.04,
              color: '#8b0000'
          },
          staticLabels: {
              font: "10px sans-serif",
              labels: [0, 20, 40, 60, 80, 100],
              color: "#000000"
          },
          staticZones: [
              {strokeStyle: "#F03E3E", min: 0, max: 20}, 
              {strokeStyle: "#FFDD00", min: 20, max: 40}, 
              {strokeStyle: "#30B32D", min: 40, max: 100}
          ],
          limitMax: false, 
          limitMin: false, 
          highDpiSupport: true 
      });
  

Practical Application Example

Here’s an example of integrating the above APIs into a more concrete application:

  
      // HTML
      
      Update Value
      
      // JavaScript
      var appCtx = document.getElementById('appGauge').getContext('2d');
      var appGauge = new Gauge(appCtx).setOptions({ /* customizations */ });
      appGauge.maxValue = 100; 
      appGauge.setMinValue(0);  
      appGauge.set(10);

      document.getElementById('updateButton').addEventListener('click', function() {
          var newValue = Math.floor(Math.random() * 100);
          appGauge.set(newValue);
      });
  

This example demonstrates a basic interactive gauge within a web application, where users can click a button to update the gauge value to a random number between 0 and 100.

By leveraging these APIs and incorporating various properties and methods, you can create highly customized and functional gauges suited to your application’s needs.

Hash: a90fd9a9a1e66597ae124f542f73ac08d3112e7d6f5e1781163be07ccae5be0d