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.
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>
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>
Please provide direct download link for full source code download and its source files
ReplyDeleteRishabh,
DeleteThe above two example is accurate. you only need to copy and paste in your code.