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.