Gauge Chart Example

An example of a Google Gauge Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['gauge']}]}"></script>
       <div id="chartKMperH" style="width: 120px; height: 120px;"></div>
       <div id="chartCompass" style="width: 120px; height: 120px;"></div>

JavaScript

google.setOnLoadCallback(drawSpeed);
  function drawSpeed() {
    var dataKMperH = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['km/h', 25]
    ]);
    var optionsKMperH = {
      min: 0, max: 70,
      width: 120, height: 120,
      redFrom: 60, redTo: 100,
      yellowFrom:50, yellowTo: 60,
      minorTicks: 5
    };
    
    var chartKMperH = new google.visualization.Gauge(document.getElementById('chartKMperH'));
      
    chartKMperH.draw(dataKMperH, optionsKMperH);
    
    setInterval(function() {
      dataKMperH.setValue(0, 10, 10 + Math.round(50 * Math.random()));
      chartKMperH.draw(dataKMperH, optionsKMperH);
    }, 10000);
  }

google.setOnLoadCallback(drawCompass);
function drawCompass() {
    var dataCompass = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Compass', 135]
    ]);
    var optionsCompass = {
      min: 0, max: 270,
      width: 400, height: 120,
      redFrom: 130, redTo: 139,
      minorTicks: 5
    };
          
    var chartCompass = new google.visualization.Gauge(document.getElementById('chartCompass'));  
      
    chartCompass.draw(dataCompass, optionsCompass);
        
    setInterval(function() {
      dataCompass.setValue(0, 1, 100 + Math.round(70 * Math.random()));
      chartCompass.draw(dataCompass, optionsCompass);
    }, 1000);
  }