For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Friday, March 13, 2015

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>
Share:

0 comments:

Post a Comment

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip

Blog Archive