Hi there I am quite new to PHP/JSON and building graphs with them, I am trying to build a graph using data I collect from my MYSQL database which is collecting data from multiple sensors but in this case a live temperature sensor. I am at a point where where I have the data echo in JSON format on a PHP page but am having trouble actually producing the graph. I feel like am running around in circles trying to complete it so im either delving into something much to complex for my knowledge or I am missing something obvious, any help will be much appreciated .
Here is the JSON format I am producing from a PHP file called data.php:
[{ "time": "04:14:39", "temperature": 15.3 }]
BELOW IS THE CODE I HAVE BEEN USING FROM AMCHARTS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>amCharts tutorial: Loading external data</title>
</head>
<body>
<!-- prerequisites -->
<link rel="stylesheet" href="http://www.amcharts.com/lib/style.css" type="text/css">
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<!-- cutom functions -->
<script>
AmCharts.loadJSON = function(url) {
if (window.XMLHttpRequest) {
var request = new XMLHttpRequest();
} else {
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', url, false);
request.send();
return eval(request.responseText);
};
</script>
<div id="chartdiv" style="width: 600px; height: 300px;"></div>
<script>
var chart;
AmCharts.ready(function() {
var chartData = AmCharts.loadJSON('data.php');
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "time";
var graph1 = new AmCharts.AmGraph();
graph1.valueField = "temperature";
graph1.bullet = "round";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.lineThickness = 2;
graph1.lineAlpha = 0.5;
chart.addGraph(graph1);
chart.categoryAxis.parseDates = true;
chart.write("chartdiv");
});
</script>
</body>
</html>
