Support for data of different length in StackedAreaChart? about react-native-svg-charts HOT 16 CLOSED

Haha, glad I can help 😄 Don't forget to give it a star if you haven't already.
And if you want to contribute just create a PR and I will happily look at it 😊

from react-native-svg-charts.

I'm not a 100% sure I understand your problem. Do you have a visualisation I can work off of?

from react-native-svg-charts.

So, the problem is that StackedAreaChart expects an array of objects with all dataPoints, but I have two lists of different objects. Both objects have a timestamp used for the x-axis, but they have different values at different keys for the y-axis.

If I merged those two lists (as in the example above), then some objects would have the "visits" key and others would have the "mentions" key, but I want to graph these together

from react-native-svg-charts.

Essentially I want to plot two different data sets with two different Y-axises but with the same x-axis

I'll see if I can come up with a better example

from react-native-svg-charts.

Still not quite sure I get the use case 😝 sorry. Try finding an existing chart that displays the behaviour. Explaining data visualisation is always tricky

from react-native-svg-charts.

Alright - here's an example: https://www.highcharts.com/demo/spline-irregular-time

I have different datasets, that need to be charted along a timeline, but the timestamps are different in the different datasets

from react-native-svg-charts.

In that example they don't use a stacked chart and the datasets don't depend on each other. Maybe you should use a layered chart?

from react-native-svg-charts.

Holy shit, you reply fast.

That does look like the way to go — I should've seen that sooner. Thank you so much! Oh, and thank you so much for this library. I was rolling my own when, 2 weeks later, this pops up out of nowhere and abstracts all the SVG path painting away. Thank you!

from react-native-svg-charts.

The one thing that is still an issue, though, is that although the datapoints dont technically "depend" on each other, they do depend on the timestamp and should be aligned according to their timestamp (e.g, if there are fewer values in one of the layered charts, but the timestamp is earlier than the last one in the other datasets), so in a way, I suppose the X-axis points do depend on eachother, in that the "timeline" still has to align well

from react-native-svg-charts.

You could just modify your dataset to have the same "x-values" and just have undefined as values where it's suitable (they won't be rendered). I'll keep this in mind as I go forward though, maybe have something similar to gridMin/Max but for the x-axis

from react-native-svg-charts.

That could be a possibility, definitely - perhaps having something like a Time chart would make sense as well, for cases where you want to plot lines along a time axis but where the different lines' dataPoints are independent of each other, but dependent on the timeline

from react-native-svg-charts.

A time scale for the xAxis is already included in the 3.0 release (planned release this week). But aligning two (or more) datasets still requires them to share the same x-axis domain (min/max)

from react-native-svg-charts.

For my usecase, they already do share the same domain (e.g displaying data for a month, or the past year, etc) but each dataset has different points (e.g when displaying data for January 2018, one line may have points for the 3rd, 5th and 20th and another line may have points for the 5th, 6th and 18th).

That's awesome though! Looking forward for 3.0 — excited about partial charts as well! :-)

from react-native-svg-charts.

Well that shouldn't be a problem at all, should work out of the box. If it doesn't could you please supply a screenshot?

Partial Charts and the new extras api is awesome 💪

from react-native-svg-charts.

Sure thing, as soon as it's released I'll give feedback on it — my app is heavy on these kinds of charts and I've found no good way to do it yet, so I'll be happy to test it out!

from react-native-svg-charts.

You should be able to do what you've described on the existing release though. Have you tried it?

from react-native-svg-charts.