Go Down

Topic: Php graphics and charts with Arduino (Read 576 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
 


Please enter a valid email to subscribe

Confirm your email address

We need to confirm your email address.
To complete the subscription, please click the link in the email we just sent you.

Thank you for subscribing!

Arduino
via Egeo 16
Torino, 10131
Italy