Ads Inside Post

Search in This Blog

Gauge chart in Google Chart

How to implement Google Gauge chart. The most important things is that how to change it's needle alternate with some interval. I have made the code that will change Gauge Google Chart's needle alternate interval.


Gauge chart in Google Chart











EXAMPLE - 1
--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
How to use Gauge chart and how to change needle frequently interval.
if this code is now show the chart then remove above two lines of <!DOCTYPE tag and <html tag and use listed below tags:
1- <html>  2- <head>
-->
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
    var gauge;
    var gaugeData;
    var gaugeOptions;
    function drawGauge() {
      gaugeData = google.visualization.arrayToDataTable([['Engine', 'Torpedo'], [120, 80]]);
      gauge = new google.visualization.Gauge(document.getElementById('gauge'));
      gaugeOptions = {
          min: 0,
          max: 280,
          yellowFrom: 200,
          yellowTo: 250,
          redFrom: 250,
          redTo: 280,
          minorTicks: 5
      };
      gauge.draw(gaugeData, gaugeOptions);
    }
      function changeTemp(dir) {
        //gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
      //gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
      gaugeData.setValue(0, 0, Math.floor((Math.random()*100)+1));
      gaugeData.setValue(0, 1, Math.floor((Math.random()*100)+1));
      gauge.draw(gaugeData, gaugeOptions);
    }
      setInterval("changeTemp(1);",1000);
    google.setOnLoadCallback(drawGauge);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="gauge" style="width: 300px; height: 300px;"></div>
  </body>

</html>



EXAMPLE - 2

--------------------
<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
    
      function drawChart() {
      setInterval("docharts();",4000);
      }

 function docharts(){
var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', Math.floor((Math.random()*100)+1) ],
          ['CPU', Math.floor((Math.random()*100)+1) ],
          ['Network', Math.floor((Math.random()*100)+1)]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5,
 animation:{
        duration: 5000
      }
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
 }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>

</html>