Utilizing chart.js allows me to showcase real-time data...
var initiateAJAX = function() {
$.ajax({
url: url,
success: function(){
var currentTime = ++time
var currentValue = Math.random()*1000;
liveChart.data.labels.push(currentTime);
liveChart.data.datasets[0].data.push(currentValue);
liveChart.update();
},
complete: function () {
// Schedule the next
setTimeout(initiateAJAX, interval);
}
});
};
initiateAJAX();
...however, when updating the chart, I notice that the first point appears in the middle of the chart while its label is at the origin of the axes. How can I align the first point and its label? You can observe this issue in action by visiting this jsfiddle link: https://jsfiddle.net/uue7am8z/4/