Chart.js: Live data via APIs?

[vacquah]

Would be great to illustrate how the data variable for any chart can be updated from another source vs. hard coding it, as shown in the examples - for example, can I use this with a text file with the values? or even pull data directly from an API source like google analytics? thx

[webdestroya]

+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

[nnnick]

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!

[nnnick]

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

[joshhunt]

+1

[drorm]

+1

[billdami]

+1

[ialtamirano]

+1

[tan-tan-kanarek]

+1

[arathael]

+1

[mbuchetics]

+1

[marcj]

+1

[damianb]

+1

[pinara747]

+1

[skhisma]

@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

[nnnick]

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.

[jwerle]

will there be an update for this feature soon?

[balexandre]

:+1:

[nnnick]

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!

[marcj]

awesome! +100

[jwerle]

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

[brentsmith-dev]

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);

[brentsmith-dev]

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

[jwerle]

@statuswoe thanks for sharing that!

[mrjuan1]

I'm looking quite forward to this update

[climaa]

+1

[tbuschto]

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.

[climaa]

+1

[albertpak]

+1

[JJ]

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

[gabovanlugo]

+1

[tpires]

+1

[jakeboyles]

+1

[christianparpart]

+1.

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

[jwerle]

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
https://github.com/nnnick/Chart.js/issues/13#issuecomment-45408138.

[marcj]

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
https://github.com/nnnick/Chart.js/issues/13#issuecomment-45408138.

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

[chancesmith]

+1

[luisrudge]

:+1:

[nnnick]

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/

[AndrewSav]

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?

[xgqfrms]

CPU status monitor

1. disable animation

1. update data

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