HenryHunt HenryHunt - 2 months ago 85
Javascript Question

AmCharts dataLoader not loading data but pasting data in and using dataProvider works fine

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?

Answer

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>