react-native-pathjs-charts
react-native-pathjs-charts copied to clipboard
Multiline charts from single dataset
Is there any support available for multiline charts? I need to be able to plot several values out of a single datatset.
{"x": 0, "yValue": 47782, "zValue":53722 }, { "x": 1, "yValue": 48497 "zValue":73722 }, { "x": 2, "yValue": 77128 "zValue":97872 }, { "x": 3, "yValue": 73413 "zValue":12382 }, { "x": 4, "yValue": 58257 "zValue":12334 }
Need to plot both yValue and zValue.
You can use a 2d array. Like this:
[
[ // This for drawing first line
{x: 1, y: 1}
],
[ // This for drawing second line. Put your zValue into y
{x: 1, y: 1}
]
]
You can also try the code in example
I was looking support for a true multiline chart wherein x values are same for all, and y values differ.
I might misunderstanding your meaning.
I plot the chart based your data above.
Is this what your want to do?
You are manipulating the data in a 2-d array to achieve these results, however, what I'm looking for is something like-
[{"x": 0, "yValue": 47782, "zValue":53722 }, { "x": 1, "yValue": 48497 "zValue":73722 }, { "x": 2, "yValue": 77128 "zValue":97872 }, { "x": 3, "yValue": 73413 "zValue":12382 }]
And I want to plot yValue and zValue against x. Reason for such a requirement is that x is basically a time value.
Appreciate your time for helping me!
I transform your data like this.
let originData = [
{ x: 0, yValue: 47782, zValue: 53722 },
{ x: 1, yValue: 48497, zValue: 73722 },
{ x: 2, yValue: 77128, zValue: 97872 },
{ x: 3, yValue: 73413, zValue: 12382 },
{ x: 4, yValue: 58257, zValue: 12334 }
];
let data = originData.reduce(
(list, d) => {
list[0].push({ x: d.x, y: d.yValue });
list[1].push({ x: d.x, y: d.zValue });
return list;
},
[[], []]
);
But just like you said, if x values are all the same, this is wasted because of duplicating x.
As others have indicated there is no support for multiline charts with that desired data input format. I'm not opposed to reviewing a pull request to add support (and will keep this issue open) but for now, the workaround @jordenchang55 suggests will have to do.