capitalone / react-native-pathjs-charts

Android and iOS charts based on react-native-svg and paths-js
Apache License 2.0
879 stars 260 forks source link

Multiline charts from single dataset #192

Open shrupa opened 7 years ago

shrupa commented 7 years ago

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.

jordenchang55 commented 7 years ago

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

shrupa commented 7 years ago

I was looking support for a true multiline chart wherein x values are same for all, and y values differ.

jordenchang55 commented 7 years ago

I might misunderstanding your meaning.
I plot the chart based your data above. Is this what your want to do? simulator screen shot 2017 9 16 5 04 56

shrupa commented 7 years ago

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!

jordenchang55 commented 7 years ago

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.

marzolfb commented 7 years ago

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.