Updating data

[tikhonbelousko]

Is it possible to use component with new data? Let's say I want to update graph every second. If yes, then how to update it. Because right now I'm getting a mess with xAxis. Also how to make graph follow updates and always show the new data in the viewport?

[rrag]

can you share a plunker with the xAxis problem. a few things you can check for assuming you are using 0.2.0

1. <Chart id={...}> does not have a xAccessor
2. you have added dataTransform={[ { transform: StockscaleTransformer } ]} to the ChartCanvas

a working example is available in http://plnkr.co/edit/gist:1eac0cb78f27b31415ac?p=preview

about the data updating every second, it used to work before in 0.1.6 and I am trying to figure out why it is not working.

[rrag]

chart not updating when data is updated is a bug. It think was never fully working in 0.1.6, it worked only when there were no DataTransforms but since DataTransform is removed in 0.2.0 this bug has surfaced. I am working to push a fix for this soon.

However I question why you need to update at regular intervals, do you plan to show intra day data which is updated every second? While the fix I am yet to make will make the chart change, the zoom out will have a problem I presume. When you zoom out beyond a certain point, it does not make sense to display so many periods, so the stockscale automatically switches from D - day to W- week to M - month. For intra day data, I have not tested how this would behave.

If all you need is just a chart which updates a rolling period, this fix should make that work.

[tikhonbelousko]

I need to update, lets say, every second. It involves changing values inside of a period as well as adding new bars.

Here is plunkr:
http://plnkr.co/edit/QrykKHHP2rkhzSV4yZgz?p=preview

So current problems involve:

• xAxis breaks after zooming;
• zoom breaks after panning right-most, left-most point;
• the chart resets its position if I have some empty space on the left or on the right, so basically I cannot see latest update;
• the chart doesn't follow new updates. I need it shift the graph with every update to see latests changes;
• no canvas retina support (minor problem).

I would also love to see an instruction how to add custom components!

[tikhonbelousko]

With every update of the chart mouse position also breaks and I cannot see side indicators, date, OHLC, and hairlines.

[rrag]

I see what you are trying, you expect the state of the chart except the data to be retained.

Some of these are new feature requests

but the xAxis breaking is because of a mistake in your code you do data.push(data[i]); that essentially repeats a date again, the axis gets confused when it sees a repeating date or rather a date which is not in increasing order, you will have to ensure that the data is sorted by date and dates don't repeat.

as for the rest

• zoom breaks after panning right-most, left-most point;
  I think this is also because of the data having duplicate dates since it does a binary search for the left and right position and as the data is not sorted the left becomes more than right
• the chart resets its position if I have some empty space on the left or on the right, so basically I cannot see latest update;
  This is a nice feature, it not there today. I should add that
• the chart doesn't follow new updates. I need it shift the graph with every update to see latests changes;
  This is due to the bug I mentioned above
• no canvas retina support (minor problem).
  I am not sure what this means, can you please explain
• With every update of the chart mouse position also breaks and I cannot see side indicators, date, OHLC, and hairlines.
  looks like a bug
• I would also love to see an instruction how to add custom components!
  I intend to do this documentation soon. Currently working on improving the pan performance for firefox., so there are some changes I have to make which will change the way you write custom components so doing this first.

[tikhonbelousko]

Retina support means high-density pixel displays support, like MacBook Pro has for instance or iPhone. Usually it's fixed with setting size of the canvas twice as big but setting style of the actual size. Here is an example.

[tikhonbelousko]

I've updated plunkr, but zoom still breaks on update.

[rrag]

I am not following zoom breaks on update, do you mean when the update happens every second, the chart fits the entire width?

[rrag]

question about how you feel about having a separate api to push data

<ChartCanvas ref="chart" ...>
  ...
  ...
</ChartCanvas>

this.refs.chart.pushData( [ {...}, {...}, {...} ] );

This will help with shifting the chart by the length of the array added, else I am having a tough time finding out that it is only the data which has changed in the componentWillReceiveProps and if only data has changed have to differentiate between a completely different data and one with just a few more elements in the array.

Any ideas or preference you have?

[tikhonbelousko]

About zoom. Try constantly pan to the right. After several times of panning I ended up without zoom.

Well, push data may work, but what if I want to change existing bar? And pushing data doesn't seem react way of doing this.

[rrag]

good feedback.

still not published to npm or released a new version, let me know how this is

http://rrag.github.io/react-stockcharts/documentation.html#/updating_data

There are still some issues when new ticks appear after zoom out, but few of the problems you have mentioned are addressed.

[rrag]

Decided to use the above option of pushData. It is very difficult and error prone to determine if an update to data, is a complete update or an update with a few more ticks. created alterData similar to above for updating existing data points.

Highstock also have a similar function for this purpose

See the example in action.

[rrag]

published 0.2.1 with some of the fixes. except for retina support, which is a separate issue from updating data. Please open a new issue if you find problems with this build

[tikhonbelousko]

Awesome! Thanks for your work! 👍

[rrag]

added documentation on creating custom Series components and custom indicators

http://rrag.github.io/react-stockcharts/documentation.html#/custom_create_indicator
http://rrag.github.io/react-stockcharts/documentation.html#/custom_create_xxxseries

Appreceate feedback