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>
Previous
Next Post »