margelo
Chart doesn't reflect dataset
Hi, I am trying to use react native graph however in my opinion something is wrong with this library.
Please take a look at the chart. It doesn't look like the dataset. Do you agree with me?
const numberArray: Array<number> = [0, 20, 100, 0, 100, 100, 10, 0]; const graphPoints: GraphPoint[] = numberArray.map((x, index) => { return { value: x, date: new Date( new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index ), }; });
@mrousavy am i doing anything wrong?
Hi, I am trying to use react native graph however in my opinion something is wrong with this library.
Please take a look at the chart. It doesn't look like the dataset. Do you agree with me?
const numberArray: Array<number> = [0, 20, 100, 0, 100, 100, 10, 0]; const graphPoints: GraphPoint[] = numberArray.map((x, index) => { return { value: x, date: new Date( new Date(2000, 0, 1).getTime() + 1000 * 60 * 60 * 24 * index ), }; });@mrousavy am i doing anything wrong?
Same here, the values are correct for me but the graph will show a line that is increasing even though the value shows dips....
Experienced the same issue. I was very lucky to spot it.... Line is different in from the data set. No good.
I ran into this issue as well. I think this issue arises when your dataset skips date ranges, or if the datetime is not in UTC. In my usage, I had a list of objects reflecting a count per day. However, for days without any values they were skipped, causing the chart to not match the data.
After ensuring that all days were present in the list, even with a count of 0, that resolved this issue. I also had to update all of the dates to be in UTC.
Hopefully that helps others experiencing this?
This issue still occurs, Look at the test input data below
const defaultData: GraphPoint[] = [ { date: new Date(2000, 0, 1), value: 0 }, { date: new Date(2000, 0, 2), value: 1 }, { date: new Date(2000, 0, 3), value: 0.4 }, { date: new Date(2000, 0, 4), value: 0.2 }, { date: new Date(2000, 0, 5), value: 0.8 }, { date: new Date(2000, 0, 6), value: 0.6 }, { date: new Date(2000, 0, 7), value: 0.4 }, { date: new Date(2000, 0, 8), value: 0.7 }, { date: new Date(2000, 0, 9), value: 0.5 }, { date: new Date(2000, 0, 10), value: 1 }, { date: new Date(2000, 0, 11), value: 0.9 }, { date: new Date(2000, 0, 12), value: 0.6 }, ];
results in this image
where you can see the first peak is the value 1 and the last peak is also 1 (verified by consolelog) but they are not at the same height
the max point should be 1 whicH appears twice so there should be two peaks at the same height one at the start and one near the end but the one at the end is almost double the first one
Yea this is the chart smoothing I built. It sacrifices accuracy for better visuals, we can add a prop to disable that smoothing to present accurate data for such extreme values. If someone submits a PR for that prop I can gladly review & merge that :)
Ah gotcha, good to know the reason as my debugging was way off that being the reason 😆 I'll try look into disabling the smoothing if I can, thanks marc as always
Yea this is the chart smoothing I built. It sacrifices accuracy for better visuals, we can add a prop to disable that smoothing to present accurate data for such extreme values. If someone submits a PR for that prop I can gladly review & merge that :)
@mrousavy i'm gonna add this over the weekend.
We'll soon merge a PR that adds a disableSmoothing prop to <LineGraph />, which let's you disable the smoothing logic that @mrousavy mentioned.
This will remove any inaccuracies with the dataset. A new NPM version should be out soon!
Closing this issue for now. If something doesn't work, let me know.
@chrispader the current PR still doesn't solve the issues
Multiple data points on same day and also if there is a break with the dates on data does not show correctly
