Привет. Я новичок в PHP/JSON и построении с ними графиков. Я пытаюсь построить график, используя данные, которые я собираю из моей базы данных MYSQL, которая собирает данные с нескольких датчиков, но в данном случае с датчика температуры в реальном времени. Я нахожусь в точке, где у меня есть эхо данных в формате JSON на странице PHP, но у меня возникают проблемы с созданием графика. Я чувствую, что бегаю по кругу, пытаясь завершить его, поэтому я либо углубляюсь во что-то слишком сложное для своих знаний, либо упускаю что-то очевидное, любая помощь будет высоко оценена.
Вот формат JSON, который я создаю из файла PHP с именем data.php:
[{ "time": "04:14:39", "temperature": 15.3 }]
НИЖЕ ПРЕДСТАВЛЕН КОД, КОТОРЫЙ Я ИСПОЛЬЗОВАЛ ОТ 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>
