], }] }, options: { responsive: true, title:{ display:true, text:"Chart.js Time Point Data" }, scales: { xAxes: [{ type: "time", display: true, scaleLabel: { display: true, labelString: 'Date' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'value' } }] } } }; window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config); }; document.getElementById('randomizeData').addEventListener('click', function() { config.data.datasets.forEach(function(dataset) { dataset.data.forEach(function(dataObj) { dataObj.y = randomScalingFactor(); }); }); window.myLine.update(); }); document.getElementById('addData').addEventListener('click', function() { if (config.data.datasets.length > 0) { var numTicks = myLine.scales['x-axis-0'].ticksAsTimestamps.length; var lastTime = numTicks ? moment(myLine.scales['x-axis-0'].ticksAsTimestamps[numTicks - 1]) : moment(); var newTime = lastTime .clone() .add(1, 'day') .format('MM/DD/YYYY HH:mm'); for (var index = 0; index < config.data.datasets.length; ++index) { config.data.datasets[index].data.push({ x: newTime, y: randomScalingFactor() }); } window.myLine.update(); } }); document.getElementById('removeData').addEventListener('click', function() { config.data.datasets.forEach(function(dataset, datasetIndex) { dataset.data.pop(); }); window.myLine.update(); });