Go Down

Topic: Php graphics and charts with Arduino (Read 535 times) previous topic - next topic

Sansu

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?

Caltoa

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

Sansu

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

Caltoa

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.

chetto983

#4
Apr 17, 2014, 07:31 am Last Edit: Apr 17, 2014, 07:33 am by chetto983 Reason: 1
you can use google chart:

Html:
Code: [Select]

<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:

Code: [Select]


<?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.

Sansu

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...

bjarne

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.

Sansu

#7
Apr 18, 2014, 01:50 pm Last Edit: Apr 18, 2014, 01:52 pm by Sansu Reason: 1
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

Go Up