<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
standard title page
</title>
<!--
google api don’t change
-->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawVisualization);
$(document).ready(function() {
chart = new google.visualization.Gauge(document.getElementById('visualization'));
chart2 = new google.visualization.Gauge(document.getElementById('visualization2'));
chart3 = new google.visualization.Gauge(document.getElementById('visualization3'));
chart4 = new google.visualization.Gauge(document.getElementById('visualization4'));
chart5 = new google.visualization.Gauge(document.getElementById('visualization5'));
// first graph (temperatura proc)
data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['C', 0],
]);
options = {
width: 250, height: 250,
max:100, min:0,
animation:{duration: 500},
redFrom:70, redTo:100,
yellowFrom:50, yellowTo:70,
greenFrom:0, greenTo:50,
minorTicks: 10,
majorTicks: ["-20",,20,,40,,60,,80,,100]
};
// second graph (CURENT)
data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['A', 0],
]);
options2 = {
width: 250, height: 250,
max:20, min:0,
animation:{duration: 500},
redFrom:15, redTo:20,
yellowFrom:10, yellowTo:15,
greenFrom:0, greenTo:10,
minorTicks: 10,
majorTicks: ["0",,5,,,10,,,15,,20]
};
// third graph (tensiune)
data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['V', 0],
]);
options3 = {
width: 250, height: 250,
max:16, min:0,
animation:{duration: 500},
redFrom:0, redTo:10,
yellowFrom:10, yellowTo:14,
greenFrom:14, greenTo:16,
minorTicks: 10,
majorTicks: ["0",,4,,,8,,,12,,16]
};
// third graph (putere)
data4 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['W', 0],
]);
options4 = {
width: 250, height: 250,
max:200, min:0,
animation:{duration: 500},
redFrom:150, redTo:200,
yellowFrom:100, yellowTo:150,
greenFrom:0, greenTo:100,
minorTicks: 10,
majorTicks: ["0",,50,,,100,,,150,,200]
};
// first graph (UMIDITATE)
data5 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['%', 0],
]);
options5 = {
width: 250, height: 250,
max:100, min:0,
animation:{duration: 500},
redFrom:70, redTo:100,
yellowFrom:50, yellowTo:70,
greenFrom:0, greenTo:50,
minorTicks: 10,
majorTicks: ["0",,20,,40,,60,,80,,100]
};
});
// function to update data automatically
function drawVisualization() {
chart.draw(data,options);
chart2.draw(data2,options2);
chart3.draw(data3,options3);
chart4.draw(data4,options4);
chart5.draw(data5,options5);
}
function test(ajaxdata) {
var curent=ajaxdata.curent;
var temperature=ajaxdata.temperature;
var tensiune=ajaxdata.tensiune;
var putere=ajaxdata.putere;
var humidity=ajaxdata.humidity;
console.log(ajaxdata);
data.setValue(0,1,temperature);
data2.setValue(0,1,curent);
data3.setValue(0,1,tensiune);
data4.setValue(0,1,putere);
data5.setValue(0,1,humidity);
chart.draw(data,options);
chart2.draw(data2,options2);
chart3.draw(data3,options3);
chart4.draw(data4,options4);
chart5.draw(data5,options5);
}
function status_update() {
var jqxhr = $.getJSON('data.php?' + 'random=' + Math.random(), function() {
})
.fail(function() {
})
.done(function(ajaxdata) {
test(ajaxdata);
});
}
var refreshId = setInterval('status_update()', 1000);
$.ajaxSetup({ cache: false });
</script>
</head>
<!--
html standard for view a graph
-->
<body style="font-family: Arial;border: 0 none;">
<div id="visualization2" style="float: left; width: 250px; height: 250px;"></div>
<div id="visualization3" style="float: left; width: 250px; height: 250px;"></div>
<div id="visualization4" style="float: left; width: 250px; height: 250px;"></div>
<div id="visualization" style="float: left; width: 250px; height: 250px;"></div>
<div id="visualization5" style="float: left; width: 250px; height: 250px;"></div>
</body>
</html>