Hi, could you please help me.
I’m retrieving temperature and time from Thingspeak.com and I’m trying to plot the data points on the graph (see code below) but I don’t seem to be able to get the date formatted properly. in particular the date.
My problem is generating the data_arr array in the getData() function, I’m I formatting the data point objects correctly?
Any help would be appreciated.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>
<script type="text/javascript">
var data_arr = []; //global array
window.onload = function() {
function getData() {
$.getJSON(
'http://api.thingspeak.com/channels/312667/feeds.json?timezone=Australia/Brisbane&days=1×cale=240',
function(json_data) {
console.log(json_data);
json_data.feeds.forEach(function(data) {
data_arr.push({
x: new Date(data.created_at),
y: parseFloat(data.field1)
});
});
console.log("data_arr: ", data_arr);
});
};
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Temperature"
},
axisX: {
valueFormatString: "HH:mm TT",
// labelAngle: -50
},
data: [{
xValueType: "dateTime",
type: "line",
dataPoints: data_arr,
}
]
});
getData();
chart.render();
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
.
