12👍
✅
Using spanGaps you can control behavior of line chart between points with no or null data:
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k > 0) {
timestamp.push(new Date().getTime() - 60 * 60 * 1000 * k);
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: speed,
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
spanGaps: false,
},
{
data: target,
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
spanGaps: false,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
As alternative you can modify your data array and replace null
with zero
:
var timestamp = [],
speed = [10, 100, 20, 30, 40, null, null, null, 100, 40, 60],
target = [20, 30, 40, 10, null, null, null, null, 200, 60, 90];
for (var k = 10; k--; k>0) {
timestamp.push(new Date().getTime()-60*60*1000*k);
}
function nullToZero(array) {
return array.map(function(v) {
if (v==null) return 0; else return v;
});
}
var ctx = document.getElementById('chart').getContext("2d");
var data = {
labels: timestamp,
datasets: [{
data: nullToZero(speed),
backgroundColor: ['rgba(0, 9, 132, 0.2)'],
borderColor: ['rgba(0, 0, 192, 1)'],
borderWidth: 1,
},
{
data: nullToZero(target),
borderColor: "rgba(255,0,0,1)",
backgroundColor: "rgba(255,0,0,0)",
borderWidth: 1,
tooltips: {
enabled: false
}
}
]
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 300
}
}],
xAxes: [{
type: 'time',
}]
},
elements: {
point: {
radius: 0,
hitRadius: 5,
hoverRadius: 5
},
line: {
tension: 0
}
},
legend: {
display: false
},
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
zoom: {
enabled: true,
drag: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax: {
x: null,
y: null
}
},
};
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
Source:stackexchange.com