JavaScript
var canvas = document.getElementById('myChart');
var data = {
labels: ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
datasets: [{
label: "My First dataset",
fill: false,
lineTension: 0.2,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 0,
pointHitRadius: 10,
data: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null],
}]
};
var steps = 0;
function adddata() {
myLineChart.data.datasets[0].data.shift();
myLineChart.data.datasets[0].data.push(Math.floor((Math.random() * 100) + 1));
if (steps % 15 === 0){
myLineChart.data.labels.push("n");
}
else{
myLineChart.data.labels.push("");
}
myLineChart.data.labels.shift();
myLineChart.update();
steps++;
}
var option = {
showLines: true,
animation: false,
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
max: 100,
min: 0,
stepSize: 20
},
gridLines:{drawTicks: false}
}],
xAxes: [{
gridLines: {
display: true,
drawTicks: false
},
ticks: {
...