AmCharts dataLoader not loading data but pasting data in and using dataProvider works fine
Question
I'm writing a webpage to display graphs of data stored in an MySQL database using AmCharts, but am having problems getting data to load from it. I copied the code from the 'time series, seconds' template (including the supplied data displayed using dataProvider ) of the AmCharts chart maker into my page. As expected this works completely fine.
I then used the dataLoader tutorial on the AmCharts website to try loading data from my database. I edited my current code (copied from the chart maker as mentioned above) by removing the dataProvider part and adding in the following under the "type": "serial", line:
"dataLoader": {
"url": "getdata.php"
},
Finally I changed the categoryField and two valueField attributes in the graphs section so they matched up with my data. The getdata.php file is in the same directory as the page that I want to display the graphs on and contains the following code:
<?php
$host = "*";
$username = "*";
$password = "*";
$database = "*";
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 22:30:00'";
$executeReport = mysqli_query($connection, $reportQuery);
$data = array();
while ( $row = $executeReport->fetch_assoc() ) {
$data[] = $row;
}
echo json_encode( $data );
?>
However, when loading the charts page, all I get is an empty chart with the title, legend and AmCharts watermark, no data is displayed. I know the getdata.php file is correct because I ran it in a browser and got the following output:
[{"reportid":"00000001","timestamp":"2016-09-20 18:53:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000002","timestamp":"2016-09-20 18:54:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.94","soil30temp":"15.56","soil100temp":"15.63"},{"reportid":"00000003","timestamp":"2016-09-20 18:55:00","shieldedtemp":"16.31","exposedtemp":"16.38","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000004","timestamp":"2016-09-20 18:56:00","shieldedtemp":"16.31","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000005","timestamp":"2016-09-20 18:57:00","shieldedtemp":"16.25","exposedtemp":"16.25","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000006","timestamp":"2016-09-20 18:58:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000007","timestamp":"2016-09-20 18:59:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000008","timestamp":"2016-09-20 19:00:00","shieldedtemp":"16.19","exposedtemp":"16.13","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"}]
Furthermore, when I remove the dataLoader attribute and paste the above JSON into a dataProvider attribute, everything works fine and the data is displayed.
The code for the main chart page is below: "; $username = ""; $password = " "; $database = " ";
$connection = mysqli_connect($host, $username,
$password, $database) or die("response[0]");
// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 19:00:00'";
//$executeReport = mysqli_query($connection, $reportQuery);
//$data = array();
//while ( $row = $executeReport->fetch_assoc() ) {
// $data[] = $row;
//}
//echo json_encode( $data );
?>
<html>
<head>
<title>Remote Latest Data Warwick</title>
<style>
* {
font-family: "Segoe UI", "-apple-system", "Helvetica Neue";
}
.headerContainer {
width: 100%;
height: 88;
top: 0;
position: fixed;
background: black;
}
.headerRight {
width: 560;
height: 78;
float: right;
}
.textMo {
margin-top: 16;
margin-left: 25;
float: left;
font-size: 38;
color: white;
}
.textRld {
margin-top: 8;
margin-right: 15;
float: right;
font-size: 40;
color: white;
}
.textLoc {
margin-right: 70;
float: right;
font-size: 13;
color: white;
}
.greenBar {
width: 100%;
height: 7;
top: 78;
position: fixed;
background: #cbff31;
}
.footerContainer {
width: 100%;
height: 39;
margin-bottom: 0 auto;
bottom: 0;
position: fixed;
background: black;
}
.footerFieldContainer {
max-width: 1216;
height: 39;
margin: 0 auto;
padding-top: 2;
padding-right: 10;
padding-left: 10;
position: center;
}
.footerFieldLabel {
margin-top: 0;
padding-top: 7;
margin-right: 10;
float: left;
color: #cbff31;
font-size: 15;
box-sizing: border-box;
}
.footerFieldBorder {
width: 91;
height: 31;
margin-top: 2;
padding-top: 2;
float: left;
background: black;
color: black;
border: 2 solid #575757;
border-radius: 5;
box-sizing: border-box;
}
.footerFieldText {
width: 100%;
float: right;
color: white;
text-align: center;
font-size: 19;
}
</style>
<script>
function onLoad() {
startTime();
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function startTime() {
var today = new Date();
var dd = checkTime(today.getDate());
var yyyy = today.getFullYear();
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var MM = monthNames[today.getMonth()];
var hh = today.getHours();
var mm = checkTime(today.getMinutes());
var ss = checkTime(today.getSeconds());
var formatted = dd + " of " + MM + " " + yyyy + " at " + hh + ":" + mm + ":" + ss;
document.getElementById('currentTime').innerHTML = formatted;
timer = setTimeout(function () { startTime() }, 500);
}
</script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript">
AmCharts.makeChart("temperatures",
{
"type": "serial",
"dataLoader": {
"url": "getdata.php"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"theme": "default",
"categoryAxis": {
"minPeriod": "ss",
"parseDates": true
},
"chartCursor": {
"enabled": true,
"categoryBalloonDateFormat": "JJ:NN:SS"
},
"chartScrollbar": {
"enabled": true
},
"trendLines": [],
"graphs": [
{
"bullet": "round",
"id": "AmGraph-1",
"title": "graph 1",
"valueField": "shieldedtemp"
},
{
"bullet": "square",
"id": "AmGraph-2",
"title": "graph 2",
"valueField": "exposedtemp"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"title": "Axis title"
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
]
}
);
</script>
</head>
<body onload="onLoad()" style="margin: 0">
<!-- MAIN: Page header -->
<div class="headerContainer">
<p class="textMo">Weather Station</p>
<div class="headerRight">
<b class="textRld">Remote Latest Data Warwick</b>
<i class="textLoc">Latitude: 52.279998, Longitude -1.561793</i>
</div>
<div class="greenBar"></div>
</div>
<!-- MAIN: Data fields -->
<div class="mainContainer" style="background: red">
<div class="actionBar">
<a style="float: right" href>View Live Data</a>
</div>
<div id="temperatures" style="width: 100%; height: 400; background: #ffffff"></div>
</div>
<!-- MAIN: Page footer -->
<div class="footerContainer">
<div class="footerFieldContainer">
<p class="footerFieldLabel">Current Time:</p>
<div class="footerFieldBorder" style="width: 273">
<b class="footerFieldText" id="currentTime">16 of Sep 2016 at 12:02:35</b>
</div>
<p class="footerFieldLabel" style="margin-left: 15">Time of Data:</p>
<div class="footerFieldBorder" style="width: 70">
<b class="footerFieldText">
<?php
$date = date("H:i", strtotime($reportArray[1]));
echo $date;
?>
</b>
</div>
<div style="float: right">
<p class="footerFieldLabel">Approximate Number of Seconds to Update:</p>
<div class="footerFieldBorder" style="width: 40">
<b class="footerFieldText">59</b>
</div>
</div>
</div>
</div>
</body>
</html>
It seems like there is some kind of broken link between the chart and data, but the chart and data themselves are fine. Why is it not working and how can I get it to work?
1 answers
solution1
2 ACCPTED 2016-09-21 15:13:39
The AmCharts dataLoader is an external plugin that requires an additional JavaScript file to be loaded in addition to the chart JavaScript files. Add the following after your amcharts and serial js includes:
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.