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.
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>
 |
| 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>
Posts
0 comments:
Post a Comment