Hello, I’m currently working on creating a dynamic line chart using Chartjs. The data is being pulled from an SQL database using PHP in JSON format. Although the data is successfully retrieved, the chart appears blank. Any assistance would be greatly appreciated.
$(document).ready(function() {
var dataPointsA = []
var dataPointsB = []
$.ajax({
type: 'GET',
url: 'data.php',
dataType: 'json',
success: function(field) {
for (var i = 0; i < field.length; i++) {
dataPointsA.push({
x: field[i].datetime,
y: field[i].roomtemp
});
dataPointsB.push({
x: field[i].datetime,
y: field[i].tanktemp
});
}
console.log(field);
var chartdata = {
title: {
text: "Fish Tank Monitor"
},
data: [{
type: "line",
name: "line1",
dataPoints: dataPointsA
}, {
type: "line",
name: "line2",
dataPoints: dataPointsB
}, ]
};
console.log(chartdata);
var ctx = mycanvas.getContext('2d');
var barGraph = new Chart(ctx, {
type: 'line',
data: chartdata,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
});
}
});
});
Here is a sample of the JSON data:
[{"datetime":"2018-07-28 22:33:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:32:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:31:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:30:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:29:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:28:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:27:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:26:00.000","roomtemp":26.8,"tanktemp":28.4},{"datetime":"2018-07-28 22:25:00.000","roomtemp":26.9,"tanktemp":28.4},{"datetime":"2018-07-28 22:24:00.000","roomtemp":26.9,"tanktemp":28.4}]