Pages: [1]   Go Down
Author Topic: Php graphics and charts with Arduino  (Read 439 times)
0 Members and 1 Guest are viewing this topic.
Offline Offline
Jr. Member
**
Karma: 1
Posts: 57
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Edison Member
*
Karma: 36
Posts: 1219
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Jr. Member
**
Karma: 1
Posts: 57
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Edison Member
*
Karma: 36
Posts: 1219
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Jr. Member
**
Karma: 0
Posts: 53
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

you can use google chart:

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

<?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.
« Last Edit: April 17, 2014, 12:33:03 am by chetto983 » Logged

Offline Offline
Jr. Member
**
Karma: 1
Posts: 57
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Full Member
***
Karma: 3
Posts: 116
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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

Offline Offline
Jr. Member
**
Karma: 1
Posts: 57
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

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
« Last Edit: April 18, 2014, 06:52:08 am by Sansu » Logged

Pages: [1]   Go Up
Jump to: