-
Notifications
You must be signed in to change notification settings - Fork 11.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding and removing data in v2 #1997
Comments
@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();
} |
@etimberg, but that won't have the same animation as the one in the video I posted. My question was how to have an animation like in the video. Sorry if I wasn't clear enough. |
Ah, ok. I understand now. I think if you do all the removes, then call 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();
} |
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. |
@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. |
@jfurrow No, I didn't 😞 |
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 |
@IonutLaceanu I found an implementation that may work for you: http://jsbin.com/pohode/edit?js,output |
@etimberg Thanks. This worked! This should really be reintegrated back into the core. |
yes, @etimberg . Is there any plan to add this feature to main version? Delete data from left does not rerender the hole chart... Thanks! |
As it was mentioned before, this is huge regression. Realtime charts become more and more in demand. |
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. If that is true, removing the animation makes it work better in this case :) |
+1, this is a major roadblock to using this library for live data |
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. |
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/). |
@simonbrunel Wow man, this is fantastic! |
@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. |
oh man, of course, it'd be user's responsibility to |
Here is the Plunker and you can also download and experiment with these dist files: Chart.js or Chart.bundle.js. |
Thanks for making a PR! |
Addressed in #3399 |
I am making exactly this, but is it posible to avoid the transition or at least reduce it? |
@franciscop you could do |
` function addData(whatChart) { function removData(whatChart){ |
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
andremoveData
.Is there a way to have this behavior in v2?
https://www.dropbox.com/s/eovva6wfagq5vg8/moving-chart.mov?dl=0
The text was updated successfully, but these errors were encountered: