Chart.js: Adding and removing data in v2

[IonutLaceanu]

As per #1609, we now can replace the entire data object and call update().

However, I'm not able to replicate this behavior, which in v1 was possible by using addData and removeData.

Is there a way to have this behavior in v2?
https://www.dropbox.com/s/eovva6wfagq5vg8/moving-chart.mov?dl=0

[etimberg]

@IonutLaceanu you could do something like

function moveChart(chart, newData) {
    chart.data.labels.push('new label'); // add new label at end
    chart.data.labels.splice(0, 1); // remove first label

    chart.data.datsets.forEach(function(dataset, index) {
        dataset.data.push(newData[index]); // add new data at end
        dataset.data.splice(0, 1); // remove first data point
    });

    chart.update();
}

[IonutLaceanu]

@etimberg, but that won't have the same animation as the one in the video I posted.
That would just render the new data, animating each element from zero to the current state.

My question was how to have an animation like in the video. Sorry if I wasn't clear enough.

[etimberg]

Ah, ok. I understand now.

I think if you do all the removes, then call update then do all the adds then call update again it might be closer.

function moveChart(chart, newData) {
    chart.data.labels.splice(0, 1); // remove first label
    chart.data.datsets.forEach(function(dataset) {
        dataset.data.splice(0, 1); // remove first data point
    });

    chart.update();

    // Add new data
    chart.data.labels.push('new label'); // add new label at end
    chart.data.datsets.forEach(function(dataset, index) {
        dataset.data.push(newData[index]); // add new data at end
    });

    chart.update();
}

[cmorriss]

Hi, I'm pretty new to chart.js and we're looking to use it in our product. This feature was very nice in 1.0 and I think it's a pretty big regression to not support it in 2.0.

I've tried putting in the moveChart() function, but it really isn't the same. It redraws the entire chart which makes it look like it's all new data instead of just new data coming in at the end.

I hope this can be looked into further for the 2.0 stream as it really is a great feature.

[jfurrow]

@IonutLaceanu Have you come up with a solution for this? I'm attempting to implement the same exact thing, where the chart flows continuously from right to left as new data points are added to the data set.

[IonutLaceanu]

@jfurrow No, I didn't :disappointed:

[etimberg]

I think @jtblin had a moving chart working with his angular-chart.js project using the v2.0. https://github.com/jtblin/angular-chart.js/tree/chartjs-2.0

I think the correct file to open is charts.html in the samples folder. I know this from some of the discussion on #2040

[etimberg]

@IonutLaceanu I found an implementation that may work for you: http://jsbin.com/pohode/edit?js,output

[ericcirone]

@etimberg Thanks. This worked! This should really be reintegrated back into the core.

[zjw1918]

yes, @etimberg . Is there any plan to add this feature to main version? Delete data from left does not rerender the hole chart... Thanks!

[DmitryEfimenko]

As it was mentioned before, this is huge regression. Realtime charts become more and more in demand.
Suggestions by other people don't quite work. The animation is weird. It'd be great if it was exactly like ot was before.
I would not mind having to use extra methods if it'll mean beautiful and meaningful animation.
Are there any plans to improve this?

[josegranjo]

Previous jsbin didn't work for me, but I changed it like this: http://jsbin.com/xumekecasa/1/edit?js,output

"Insert" animation is ok, but the "remove" animation is very different from a translation on XX axis.
Is this the best we can get with animation?

If that is true, removing the animation makes it work better in this case :)

[nicbarker]

+1, this is a major roadblock to using this library for live data

[etimberg]

We aren't opposed to adding this back to the core. If someone wants to work on this I would suggest starting with a proposal of the methods that would be added and their behaviours. That would avoid any wasted work on a PR that might not get approved.

If there is someone willing to own this feature and drive it we could add it to the v2.4 milestone.

[simonbrunel]

I'm experimenting some changes in the dataset controller to get notified when data array(s) change and so cleanup meta data and get better animations when values are inserted or removed, and this without adding extra chart APIs. This allows many kind of animations, not only from right to left or left to right. I don't know if it's what you guys are looking for but I hope it should make real time charts experience better (see these examples: http://playground.abysscorp.org/chartjs/livecharts/).

[DmitryEfimenko]

@simonbrunel Wow man, this is fantastic!
There is only one usability issue with this. The chart shows about 20 seconds worth of data. Is it possible to change that? I saw if you change speed, it kind of does that, but does it allow you set a specific time frame? Also, once you go over that time frame, is it possible to see previous data? Nvd3 has this "View Finder" feature, which lets you do that.
Anyway, awesome job!

[simonbrunel]

@DmitryEfimenko thanks :)

It's still the user responsibility to correctly update its data to get that kind of animation. For example, to translate the chart from right to left every second, you would have to write something like:

setInterval(function() {
    var data = chart.data.datasets[0].data;
    data.push(value);    // add the new value to the right
    data.shift();        // remove the first left value
    chart.update();
}, 1000);

The link I posted are just examples of what kind of animations you can now create. So you decide what data to add or remove, how many and where in the array, the refresh rate and thus the time range :)

It's not possible to see previous data (which ones are removed from the array to obtain that animation). The view finder is a totally different concept, I'm sure it's feasible but it would require a new Chart.js plugin.

[DmitryEfimenko]

oh man, of course, it'd be user's responsibility to push and shift data. I was assuming it.
How can I play around with your code? Is it possible to put it in plunker?

[simonbrunel]

Here is the Plunker and you can also download and experiment with these dist files: Chart.js or Chart.bundle.js.

[DmitryEfimenko]

Thanks for making a PR!

[etimberg]

Addressed in #3399

[franciscop]

I am making exactly this, but is it posible to avoid the transition or at least reduce it?

[etimberg]

@franciscop you could do chart.update(0) to force it render synchronously without an animation.

[mohsenTalal]

` function addData(whatChart) {
whatChart.data.datasets[0].data[2] = 8;
whatChart.data.labels[2] = "Null";
whatChart.update();
}

function removData(whatChart){
whatChart.data.labels.pop();
whatChart.data.datasets.forEach((datasets) => {
dataset.data.pop();
});
whatChart.update();
}`