My open notes: Page for monitor real-time values that uses graphs gauge with Google api

Hello everyone, here I will explain how to have a php page on some raspberry to monitor real-time values that uses graphs gauge with Google api:

Requirements: php and apache2 without any particular configuration

This will be the final result with a marker that moves in real time:

The project is based on two files: data.php and index.html

data.php: collects the values returning a standard json string with "tags" (example: temp, memory, cpu …). The name of the tag is important because it is used to retrieve the values of the graphics

code:

<?php
$data["mem_used"]=intval(exec('free -m | grep Mem | awk \'{print $3}\''));
$data["temperature"]=floatval(exec('/opt/vc/bin/vcgencmd measure_temp | cut -c6-9'));
$data["cpu"]=floatval(exec('vmstat | egrep -v \'cpu|us\' | awk \'{ print $13 }\''));
$json=json_encode($data);
echo $json;
?>

launching “php data.php” from terminal

result:

{"mem_used":144,"temperature":56.2}

You can add almost all the commands of the terminal (remember that the commands will be launched with www-data user), if the result of json string is 0 for one parameter, check this command from the terminal with user www-data and check error or permission denied

example: If you add this code (vmstat | egrep -v \'cpu|us\' | awk \'{ print $13 }\') for check cpu percentage you must add www-data user to “video” and “plugdev” linux groups

index.html: if data.php is correct display a gauge graph :)

in the documentation on the internet I have not found a way to dynamically change the graphics so I created a function

code:

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!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'));
// first graph (temperature proc)
data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temp', 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: ["0",,20,,40,,60,,80,,100]
};
// second graph (ram used)
data2 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Memory', 0],
]);
options2 = {
width: 250, height: 250,
max:512, min:0,
animation:{duration: 500},
redFrom:400, redTo:512,
yellowFrom:300, yellowTo:400,
greenFrom:0, greenTo:300,
minorTicks: 10,
majorTicks: ["0",,128,,,256,,,384,,512]
};
// third graph (cpu percentage used)
data3 = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Cpu', 0],
]);
options3 = {
width: 250, height: 250,
max:100, min:0,
animation:{duration: 500},
redFrom:60, redTo:100,
yellowFrom:30, yellowTo:60,
greenFrom:0, greenTo:60,
minorTicks: 10,
majorTicks: ["0",,20,,,50,,,80,,100]
};
});
// function to update data automatically
function drawVisualization() {
chart.draw(data,options);
chart2.draw(data2,options2);
chart3.draw(data3,options3);
}
function test(ajaxdata) {
var memused=ajaxdata.mem_used;
var temperature=ajaxdata.temperature;
var cpu=ajaxdata.cpu;
console.log(ajaxdata);
data.setValue(0,1,temperature);
data2.setValue(0,1,memused);
data3.setValue(0,1,cpu);
chart.draw(data,options);
chart2.draw(data2,options2);
chart3.draw(data3,options3);
}
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="visualization" style="float: left; width: 250px; height: 250px;"></div>
<div style="clear:both"></div>
<div id="visualization2" style="float: left; width: 250px; height: 250px;"></div>
<div id="visualization3" style="float: left; width: 250px; height: 250px;"></div>
</body>
</html>

I hope I have been helpful, in the future will add the code to save the values in line chart for historical values (temperature e humidity sensor...) and button to take actions through gpio only via php page. Thx to my friend Luca Soltoggio (http://arduinoelectronics.wordpress.com) for the code support

1 commento:

Unknown ha detto...: Salve sig. Micheletti ...
Simpatico ed interessante ...visualizzo la strumentazione correttamente , visualizzo correttamente i valori lanciando "data.php" ..maaa...nella strumentazione i valori sono "0"su tutti e tre , neanche aggiornando la pag.
Il " www-data" mi sembra corretto... soluzioni possibili ??; 1:10 AM

Posta un commento

lunedì, agosto 12, 2013

Page for monitor real-time values ​​that uses graphs gauge with Google api

1 commento:

Page for monitor real-time values that uses graphs gauge with Google api