How to set global/specific properies when updating line-chart using Chart.js?

by

0👍

✅

Instead of setting the dataset property to an empty object, just don’t include it in the dataset at all. So

data = {
    labels: chartlabel,
    datasets: [SP, NC, SPA]
};

becomes

data = {
    labels: chartlabel,
    datasets: []
};

if (SP.label !== undefined) data.datasets.push(SP)
if (NC.label !== undefined) data.datasets.push(NC)
if (SPA.label !== undefined) data.datasets.push(SPA)

in 2 places

Replace the data insertion, point attribute setting by a loop (instead of hardcoding it for 3 datasets). So

setInterval(function() {
    currentChart.addData([randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], ++latestLabel);
currentChart.datasets[0].points[8].highlightStroke = "rgba(220,0,0,1)";
currentChart.datasets[1].points[8].highlightStroke = "rgba(0,255,0,1)";
currentChart.datasets[2].points[8].highlightStroke = "rgba(0,0,255,1)";

becomes

var d = []
currentChart.datasets.forEach(function(e) {
    d.push(randomScalingFactor())
})
currentChart.addData(d, ++latestLabel);
currentChart.datasets.forEach(function(dataset) {
    dataset.points[8].highlightStroke = dataset.points[0].highlightStroke;
})

The highlightStroke for the new point is copied from the highlightStroke for the first point of the same series.

Fiddle – http://jsfiddle.net/zs99pw4L/

👍:0

currentChart2.datasets.forEach(function(e) {
    e.points[e.points.length - 1].highlightFill=e.points[0].highlightFill;
    e.points[e.points.length - 1].highlightStroke=e.points[0].highlightStroke;
});

Solves the problem too.
http://jsfiddle.net/co3L0bdb/5/

Leave a comment