Develop a line graph from JSON data

StackOverflow https://stackoverflow.com/questions/21693806

Question

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>
Was it helpful?

Solution

When parseDates is set to true, you have to provide full date (with year, month and date) in order this to work. You should also set chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS" (if this will be the date format of yours) and also categoryAxis.minPeriod = "ss" (seconds).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top