CPU status monitor

1. disable animation

2. update data

https://codepen.io/webgeeker/pen/jKBqge

from chart.js.

This feature is supported in the latest release of Chart.js

For both these demos to mimic an asynchronous request, I'm just using a simple set interval loop every 5 seconds.

Here's an example of updating a line chart using new data:
http://jsbin.com/yitep/5/edit

Here's how we can update existing data on a line chart:
http://jsbin.com/yitep/4/edit

Please note for other chart types, e.g. a bar chart, we would update the array of bars rather than points. See the docs for a bit more details on this for each chart type. http://www.chartjs.org/docs/

from chart.js.

+1 this would be very useful, as I want to use this on a wallboard which i want to create the chart once, and just refresh the data

from chart.js.

Thanks for this, in the coming couple of weeks I'm planning to add some utility methods on the charts that are returned, so after creating a chart and assigning it to a variable, you could call a method on that variable to add new data, or clear the chart etc. Stay tuned!

from chart.js.

What you could do for now is recreate your chart each time you update your data via ajax or sockets or whatever.

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

@nnnick The simplest solution i've found for now to live update is to use jQuery's replaceWith().

See here for an example: https://gist.github.com/skhisma/5689383

from chart.js.

That would work right now @skhisma

Alternatively, you could do something like this and keep hold of your chart object, then call Doughnut each time you want to load new data in.

var chartConstruct = new Chart(ctx);

chartConstruct.Doughnut(data,options);

//A little later on when you've got some new data...
chartConstruct.Doughnut(newData,options)

Chart.js won't have methods for getting new data - that'll be up to your application, but there will be a better API for this soon.

from chart.js.

will there be an update for this feature soon?

from chart.js.

👍

from chart.js.

There will be an update for this. I don't have an ETA just yet, but it'll have a whole load of new fancy stuff!

from chart.js.

awesome! +100

from chart.js.

any chance this will be done for the challenge post contest?

from chart.js.

If you're looking for a "live update" sort of look (like a line graph that grows over time) I had luck with using a different options object with animations: false for subsequent calls. If you can't wait until nnnick releases the updates.

This is the idea:

var ctx = document.getElementById("myChart").getContext("2d");
var optionsNoAnimation = {animation : false}
var myNewChart = new Chart(ctx);
myNewChart.Line(data);  
setTimeout(function(){
  myNewChart.Line(newData, optionsNoAnimation)
;}, 3000);

from chart.js.

here's a codepen showing a better example: http://cdpn.io/hyldD

from chart.js.

@statuswoe thanks for sharing that!

from chart.js.

I'm looking quite forward to this update

from chart.js.

+1

from chart.js.

Re-creating the chart with new data is simple enough, but having an animated transition would be awesome. I think it would be fairly simple to implement as long as both the old and the new data are available while drawing a frame.

from chart.js.

+1

from chart.js.

+1

from chart.js.

Just leaving my mark in case it's finally closed... :-)

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1

from chart.js.

+1.

checking the long history of this ticket, .... is this project still active? -.-`

from chart.js.

Looks dead to me
On Jun 7, 2014 7:51 AM, "Christian Parpart" [email protected]
wrote:

+1.

checking the long history of this ticket, .... is this project still
active? -.-`

—
Reply to this email directly or view it on GitHub
#13 (comment).

from chart.js.

It's dead since the beginning. ;)

Sent from my iPhone

Am 07.06.2014 um 15:48 schrieb Joseph Werle [email protected]:

Looks dead to me
On Jun 7, 2014 7:51 AM, "Christian Parpart" [email protected]
wrote:

+1.

checking the long history of this ticket, .... is this project still
active? -.-`

—
Reply to this email directly or view it on GitHub
#13 (comment).

—
Reply to this email directly or view it on GitHub.

from chart.js.

+1

from chart.js.

👍

from chart.js.

In the fist example every time animation happens the chart gets cut on the left and then it slides to the left into that blank space. Is it possible to make it so that the blanking out does not happen and the chart flows to the left smoothly, without chopping?

from chart.js.