Develop a line graph from JSON data

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

문제

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>
도움이 되었습니까?

해결책

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top