Arduino werkt samen met Google Visualization

Een ander onderdeel van de Arduino logger is natuurlijk de gemeten data vertalen naar diagrammen. Heel wat programma’s zijn er voorhanden, maar uiteindelijk ben ik in aanraking gekomen met Google Visualization, zoals eerder vermeld. Maar… hoe werkt dat dan? Ook hier weer : “PHP is at your server ehh service!”

De documentatie is voorhanden bij Google, doch het heeft me de nodige zorgen opgeleverd. Uiteindelijk is er weer een stappenplan vanuit het PHP-script:

  1. maak verbinding met de SQL server
  2. start de query op
  3. verwerk de resultaten in een grafiek
  4. teken de grafiek op het scherm, in de browser.

Om het verschalen aan Google over te laten, heb ik gebruik gemaakt van het diagram ‘Annotated timeline’. HIer kun je over de tijd heen met een venster schuiven en inzoomen op details in het grafiekje. Uiteraard in samenwerking met Javascript/Flash.

Uiteindelijk is de code zo geworden (zoals die in het PHP-scriptje staat):

<?php
$conn = mysql_connect(“mysql9Server”, “UserAccount”, “PasswordUserAccount”) or die (‘Error
connecting to mysql’);
mysql_select_db(“INSERThereYourDatabaseToBeQueried”);
$int_y_pos = -1;
$int_y_step_small = 1;
$sql = “SELECT * FROM wx_data;”;
$sql = mysql_query($sql);
$rownum = mysql_num_rows($sql);
?>
<html>
<head>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“annotatedtimeline”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(‘date’, ‘tijd’);
data.addColumn(‘number’, ‘Opbrengst’);
<?php
echo “data.addRows([\n”;
while($row = mysql_fetch_assoc($sql))
{
$int_y_pos += $int_y_step_small;
echo “[new Date(” .$row[jaar]. “, ” .$row[month]. “, ” .$row[day]. “, ” .$row[uur]. “:” .$row[minuut]. “:” .$row[seconde].”), ” .$row[dallas_1_wire_lightning_count].”],\n”;
}
echo “]);\n”;
?>
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById(‘chart_div’)) ;
chart.draw(data, {displayAnnotations:true});
}
</script>
</head>
<body>
<div id=’chart_div’ style=’width: 900px; height: 500px;’></div>
</body>
</html>

Op dit moment heb ik even de logging van de zonnepanelen uitgeschakeld.

3 thoughts on “Arduino werkt samen met Google Visualization”

  1. Momenteel is de keuze definitief op het ZonPHP gezet, die de diverse grafieken toont (per dag/week/maand/jaar).
    De Google Visualization werkt op zich goed, doch met het bouwen van queries verliep het niet zo soepel (rendering geschiedt door de browser zelf heb ik begrepen). Iets wat met ZonPHP verholpen is, nu er aansluiting is bij een community. Voordeel: PC/laptops kunnen gewoon uitgeschakeld blijven, hooguit de Arduino & internetverbinding zorgt voor alle data. In de database zelf (MySQL) kan ik op termijn eventueel zelf nog eigen queries los laten. Voor mogelijkheden over Google Visualization, raadpleeg de bronnen op het internet 😉

  2. @Wim: de annotated timeline is op mijn website bij de Qsolar statistieken te zien (in combinatie met Arduino & Pachube.com (voorlopig).

Leave a Reply

Your email address will not be published. Required fields are marked *