Php graphics and charts with Arduino

Official Hardware Classic Yún
1

Hi everyone, i use a database to store information about energy consumption in a house.
Now i would like to create a php page that shows database's values in a line chart but i don't know which library i have use....
can yoy help me please?

2

HTML5 can make charts like this : http://www.chartjs.org/

3

Very cool, but can i use php to update the values of the chart?

4

Yes, but don't ask me how.
I have seen an example of HTML5 canvas and the data was retrieved in javascript from another source (like the Arduino) to get live updates without refreshing the whole page. I don't know anymore where I have seen that.

5

you can use google chart:

Html:

<html>

<head>
	
    <title>grafico temperatura giornaliera</title>
	<a href=grafici.html>Home Page</a>
	
    <!-- Load jQuery -->
	
    <script language="javascript" type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
    <!-- Load Google JSAPI -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
	
	
	
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
      
        function drawChart() {
		
            var jsonData = $.ajax({
                url: "tracker.php",
                dataType: "json",
                async: false
            }).responseText;
			
			
		
			
			

             var obj = jQuery.parseJSON(jsonData);
            var data = google.visualization.arrayToDataTable(obj);

            var options = {
                title: 'Grafico temperatura giornaliera',
				// curveType: 'function'
				backgroundColor:  {fill:'transparent'},
				explorer: { actions: ['dragToZoom', 'rightClickToReset'] },
				reverseCategories: 'true',
            };

            var chart = new google.visualization.LineChart(
                        document.getElementById('chart_div'));
            chart.draw(data, options);
			setTimeout(drawChart, 15000 );
        }
		

    </script>
	
</head>
<body>
    <div id="chart_div" style="width: 1000; height: 600;">
    </div>
</body>
</html>

tracker.php:

<?php
    include("configurazione.php");   
	
	
    
    //$SQLString = 	
										
    $result = mysql_query("SELECT `ID`, `time`, `temperatura`, `umidita`, `Stato`, `Setpoint` FROM `temperatura` order by time desc limit 327");   
	$num = mysql_num_rows($result);   
	$data[0] = array('time','temperatura');		
   for ($i=1; $i<($num+1); $i++)
    {
		$data[$i] = array(mysql_result($result, $i-1, "time"),
						(float) mysql_result($result, $i-1, "temperatura"));
						
						
						
    }	
	
	
    echo json_encode($data);
    
?>

You can look my website here:

http://www.ilchetto.it/grafici.html

I hope this help.

Davide.

6

Thank you but i'm looking for some php library so that i can see charts even if i haven't got an internet connection...

7

You could take a look at FLOT:

http://www.flotcharts.org

I use it and am very happy with it. I store my sensor data in a csv file on the SD card (one file per day), and I use a php file to create the javascript to plot it in the web client.

8

I've also found this tutorial but i don't know how to install GDLibraries on my yun...
http://www.ebrueggeman.com/phpgraphlib/documentation/tutorial-setup-and-simple-example