Multiple Y axis, domain changing, about react-stockcharts HOT 9 CLOSED

RE:

Is it possible to fix the maximum / minimum ticks values for an axis? ...

when you say

Y axis to be limited to the value 10 :

what do you want to see on the chart when there is an item which has a larger value?

RE:

Is there a clean way to display several Y axis ?...

I am not following why the axisAt is not good, you could set it at different pixel values, here is an example with multiple yaxis all on the right side. does this help?

RE:

I can have Time based data that are related to each other...

So I understand what you are asking, you want to be able to see the yValue of 3rd May and 25th Dec for 2 different yAccessor, sort of like shifting the xAxis of one series so you can match up with another series?

from react-stockcharts.

Wow thanks for the fast reply

what do you want to see on the chart when there is an item which has a larger value?

I want the user to guess there are higher value items (the curve increases up to the limit) to eventually decrease back to a visible item.

I am not following why the axisAt is not good, you could set it at different pixel values, here is an example with multiple yaxis all on the right side. does this help?

Yes exactly, I don't know why I must have messed it up, thanks. I tried to put them on the left side, maybe it is related? I need to test that again

So I understand what you are asking, you want to be able to see the yValue of 3rd May and 25th Dec for 2 different yAccessor, sort of like shifting the xAxis of one series so you can match up with another series?

Exactly ! To see the variations between 2 set of datas that occured at different times.

from react-stockcharts.

RE:

Is it possible to fix the maximum / minimum ticks values for an axis? ...

That should be possible by creating a custom indicator, and provide a domain with the min and max value that you need. A little bit more of coding, needed to override the default behavior which will fit the max and min values of all the yAccessors in that Chart. An example would be the RSI series, where the domain always has to be between 0 and 100.

https://github.com/rrag/react-stockcharts/blob/master/src/lib/indicator/RSIIndicator.js#L71-L73

there is some documentation on how to create custom indicators. If you still have trouble with this, I will be happy to help.

RE:

I can have Time based data that are related to each other...

That is not possible, but I wonder how what you say will be helpful?

I can understand if say you want to compare the number of houses sold by month, over 5 years, and you want each year to be a different series, you will compare
Jan 2010 with Jan 2011 and Jan 2012 ...
Feb 2010 with Feb 2011 ...

what you explain is different, I have not seen any charts which does that. any examples in the wild, so I can better understand how that visualization will be helpful.

Though not what you are asking, have you considered using the CompareSeries instead? it would give you a % increase over time.

from react-stockcharts.

what you explain is different, I have not seen any charts which does that. any examples in the wild, so I can better understand how that visualization will be helpful.

[EDIT] Apparently multi-X axis will not be so important, and can easily be postponed.

Yep, I havn't seen such examples either, but the users will need that. For example, being able to compare sales in December between any other month that don't include Christmas.
I have tested to put 2 X axis, one on the top and one at the bottom, but after enabling Zoom with:

EventCapture mouseMove={true} zoom={true} pan={true} mainChart={1} defaultFocus={false}

the others X axis seem to be copies of the X axis of the mainChart, when focusing the graph. I have reproduced this problem here .

When focusing the graph, the problem occurs.

I had an other trouble that I could'nt reproduce with this plunker, it's that when I focus the graph, the graph disappears (and there are no console errors, unfortunately). I suspect that's because my array of data can be incomplete (I can have a different number of points for each curves, so the points at the end of the array can be undefined), do you have any idea ? I don't think I messed up with the mainChart Id.

An other question, I don't understand why, when removing the following line from here

dataTransform={[ { transform: StockscaleTransformer } ]}

The ChartCanvas disappears. Why is the transformation needed here?

Thanks.

from react-stockcharts.

the others X axis seem to be copies of the X axis of the mainChart, when focusing the graph. I have reproduced this problem here .

each Chart has a pair of scales xScale & yScale currently all the Charts will share copies of the same xScale and these scales are calculated on zoom, pan, and a few other actions. So when you zoom or pan here, the scales are recomputed and both Charts get the same xScales this is expected behavior. However I am looking to create a different type of chart where the xScale can be computed for each chart, for something like volume profile, but even that wont fit your need of shifting the same data

I had an other trouble that I could'nt reproduce with this plunker, it's that when I focus the graph, the graph disappears

onmousedown => panStart is triggered
onmouseup => panEnd is triggered

onpanend recalculates the scales for the data you are currently seeing on screen, I am not sure what the problem is, without seeing it on a plunker. I am happy to help if you provide a plunker or point me to a public repo with the issue.

An other question, I don't understand why, when removing the following line from here

stockscale is explained here if you remove the stockscale each Chart needs an xAccessor, Stockscale provides the xAccessor implicitly, to all its children, if you see your AreaChart example earlier, that does not have stockscale but has an xAccessor on each Chart.

This needs a better error message to be logged on console.

from react-stockcharts.

it's that when I focus the graph, the graph disappears

Well that focus problem resolved itself... But I have an other problem with a real error:

But I don't think it is worth it to dive further for the moment. It is complicated to make my code accessible, as it is embedded inside a Qt application (Qt 5.5) and uses WebSockets. I might do a javascript websocket server though, just so I could share my stuff more easily...

stockscale is explained here if you remove the stockscale each Chart needs an xAccessor,

Well, silly me, thanks.

Is there somewhere you explain how to "build" your git repo? Because I have no idea how to do it, "npm install" just seem to download all source code & dependency, but I wonder how to "build" the sources (under /lib) once I modify them into dist/react-stockchart.js ... Because what i'm doing now is modifying react-stockchart.js, but it feels really bad (especially when I want to do an other Indicator...)

One question I should have asked earlier : how do I use stockcharts to display asynchronous data? I managed to kind of do it, but it feels clumsy to me.

I want 3 curves, one for each type of Y (ep1value, ep2value ep3value).
As you can see, I have "valueX" as my timestamp and "ep1value", "ep2value", "ep3value" my Ys for my 3 yAccessors. to each valueX there are at least one "epXvalue".

The first problem I have with that, it's I have to tell, for each yAccessor, wether or not it has an Y:
For example, here would be the accessor for my curve representing ep1value :

[edited] corrected the yAccessor with my real code. plotId is the drawn curve.
yAccessor = {(d) => d[plotId+"valueY"]}

The second problem, Is that when a point undefined, the "pencil is lifted", the curve is "cut". I just had to modify Line.js drawOnCanvas to avoid interrupting the drawing :

if (yAccessor(d) === undefined) { return ; }

I am not sure it is the proper way to do, is there a way to assign to each yAccessor its own array?

The third problem, is if I want each epXValue to have their own Y axis, I didn't manage to it any other way than giving each yAccessor its own Chart, but it poses multiple problems, such as zoom, X axis not being the same...

from react-stockcharts.

Based the way you have structured the data, can you confirm if this is true?

in other words, is your data for say ep3ValueY not continuous? but has gaps?

Is there somewhere you explain how to "build" your git repo?

refer to CONTRIBUTING.md

Also for creating a custom series, you don't need to start from the stockcharts codebase, you could create then as part of your app and then include it.

Closing this issue as these are not issues I see with the library, but general questions, I am happy to continue the discussion here or even better in the gitter chatroom.

from react-stockcharts.

in other words, is your data for say ep3ValueY not continuous? but has gaps?

Yes. this is due to the fact that datas have milliseconds precision, and different gaps between 2 values (one data can have one value every 20 milliseconds, an other data will have a value every 10 seconds, etc. ). Ideally, I would have done one array of arrays, with each array representing all the values (x,y) of one curve, because there is a low probability that I will know the Y of more than one curve for an X.

open http://localhost:8090 in a browser

That's probably what I missed, I suppose the javascript builds itself inside /dist only if i do this step. I'm not used to this kind of thing :)

Also for creating a custom series

Yes, I did just that for the custom indicator for fixing the domain, it works perfectly, thanks !

the gitter chatroom.

Well I'm a github newbie too, couldn't find a link to your chatroom, I would be interested !

from react-stockcharts.

https://gitter.im/rrag/react-stockcharts

from react-stockcharts.