Timeseries transition should scroll?

[smeyfroi]

I'm using c3 to visualise a timeseries, loading new data with the load() method to update the chart with the last so-many points. The transition animates each x (time) point into its new position on the y axis. Given that, with a timeseries, each update pushes the time basis on by some amount, it seems like the transition should be a scrolling animation for the entire chart, not a point-by-point transition.

Is it possible to transition a timeseries chart with scrolling along the time axis?

[masayuki0812]

Hi @smeyfroi , Sorry there is not, but I'm going to implement this kind of feature. Please give me some time.

[smeyfroi]

No problem at all: very impressed with c3. :-)

On 6 May 2014, at 15:43, Masayuki Tanaka notifications@github.com wrote:

Hi @smeyfroi , Sorry there is not, but I'm going to implement this kind of feature. Please give me some time.

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

[fiorix]

I am also interested in this feature. The problem I'm facing currently (maybe I'm missing something?) is that load() seems to redraw the entire chart as opposed to just add new data points to the right hand side of the chart. I'd like to do this: http://www.highcharts.com/demo/dynamic-update

[masayuki0812]

Hi @fiorix , Yes, that's what I'm thinking of. I think this would be a new API like flow() that loads some data and slides the chart by the number of that data.
I know this feature is essential for this library, so I'm going to start implementing in high priority.

[fiorix]

Great, thanks!

[masayuki0812]

Hi @smeyfroi @fiorix , I added flow() API experimentally that loads data and removes the data as same number as added with transition. Please see the samples I committed and let me know it's different from what you expected.

https://github.com/masayuki0812/c3/blob/master/htdocs/samples/api_flow.html
https://github.com/masayuki0812/c3/blob/master/htdocs/samples/api_flow_timeseries.html

Regions and grids might not work with flow() and I think I'll fix soon.

[smeyfroi]

This looks like a way to add new data to a timeseries, which is great... but how to remove data from the other end of a timeseries to give a moving window on a dataset?

[masayuki0812]

Currently, the same number of data will be removed from the head. Please see this fiddle. http://jsfiddle.net/Qwxkb/1/

I think it is possible to add an option for the number of data to remove if needed. Do you have such a use case?

[smeyfroi]

Hmmm OK. I think in my specific case, with timeseries data that has 'holes' in it, I'd probably want to specify the 'earliest' valid X-axis. Does that make sense? It's probably an unusual situation though. What do you think?

[fiorix]

Nice, thanks!

[masayuki0812]

@smeyfroi I think it makes sense. You mean you want to remove the data that has earlier x value than the date specified as earliest when calling this API. It would be:

flow({
  columns: [...],
  earliest: '2014-01-01' // for example
})

then remove the data that has earlier x value than '2014-01-01'.

Is this what you meant? If so, it would be reasonable to add this kind of option because the way to specify the edge should be provided.

[smeyfroi]

Yes, that's exactly it.

I do it by shifting elements off the data lists until timestamp is greater than an 'earliest' datestamp. That assumes a sorted list of course... don't know whether you'd want to make the same assumption, but the alternative is of course to search the entire dataset for timestamps in range.

In any case, this functionality would be perfect for my use-case.

[masayuki0812]

Thank you for the detail. I think I'll add this feature as I wrote above and it could be used for your purpose. Please give me some time.

[masayuki0812]

I added length and to arguments to flow.

If length set, the data will be removed by length from its head.
if to set, the data will be removed as much as its x is less than the value set as to.

Please see this fiddle, I think these can be used for your purpose. http://jsfiddle.net/Qwxkb/1/

[smeyfroi]

Looks perfect. :-)

I'll implement in my stuff later today but this should work just great.

[masayuki0812]

Thanks :) So I'll release this feature in the next version soon.

[smeyfroi]

@masayuki0812 I've tried to integrate the flow() API into my app, working from your master. Looks fabulous in action!

I came across an issue that causes a crash if you start a chart with no data and then try to 'flow' data into it later. From your fiddle, try pasting this in to see the problem:

      var chart = c3.generate({
        data: {
          x: 'x',
          columns: [
            ['x'],
            ['data1']
          ],
... etc ...

[masayuki0812]

@smeyfroi Thank you for trying. I think the issue about no data has been fixed by this commit 2b124ae .

And I updated the sample for flow. I think it would be helpful to implement and confirm its behavior.
https://github.com/masayuki0812/c3/blob/master/htdocs/samples/api_flow_timeseries.html

[smeyfroi]

@masayuki0812 I just tried it and confirm that it works when starting with no data. :-)

[masayuki0812]

Thanks! I released 0.2.0 and it includes this feature. Please try that.

[user2301]

@masayuki0812
c3.js - flow api with REST API do not refresh the chart - angular 2 + typescript

Hi, I am trying to update c3 chart dynamically for every few minutes or seconds. The JSON data is obtained from REST API URL which is dynamic. The data points in the chart should be updated dynamically as soon as the new JSON data comes in. The window of the chart should keep moving. I am using angular 2 and typescript. I referred this example http://c3js.org/samples/api_flow.html and http://c3js.org/samples/data_load.html. The chart will not update dynamically. In order to see new values, I need to refresh it manually. Here is the sample code.

private chart: any;
this.chart = c3.generate({
   data: {
        url:  '/api/systemvalues',
        mimeType: 'json',
        keys: {
          x: 'timesatmp',
          value: ['uploadValue'],
        },
 axis: {
    x: {
      type: 'timeseries',       
});

  var vm = this;
 setTimeout(function () {
    vm.chart.flow({
             url: '/api/systemvalues',
        mimeType: 'json',
        keys: {
          x: 'timestamp',
          value: ['uploadValue'],
        },
        duration: 1000
    })
}, 2000);