react-native-pathjs-charts icon indicating copy to clipboard operation
react-native-pathjs-charts copied to clipboard

StockLine dataset sort order

Open Cody-G-G opened this issue 7 years ago • 5 comments

StockLine graph seems to automatically sort the dataset provided in ascending order based on the X axis values. This is unfortunate if you're trying to use the X axis as a time axis, since time usually progresses to the right, and so if my data set looks something like [{23, 150},{2, 250},{5, 70}], then they would not be plotted in that way, but the data point with X = 23 would be the rightmost on the graph, even though it should be the first (since it represents the hour 23 of YESTERDAY, in a 24 hour system). I believe the sorting should be optional, or at least provide an option for how to sort them (ascending / descending). Is there a reason the data sets are sorted by default?

Cody-G-G avatar Mar 22 '17 02:03 Cody-G-G

Making that sorting behavior optional/configurable is a reasonable enhancement request.

For now, one workaround I can think of is to transform the x values in your data to represent how you want things sorted. For example, modify x=23 to be x=1. Then, use static or dynamic tickLabels to display 23 for the first tick value rather than the value of 1 in your data (take a look at the static and dynamic tick label examples in the example app if you haven't had a chance to already)

Does that help?

marzolfb avatar Mar 22 '17 12:03 marzolfb

@marzolfb I've had the same idea, but encountered an issue that I only now managed to figure out, and shows some weird / tricky behavior... if the data set is not sorted by X in ascending order, then it is sorted by X, but also by Y in ascending order...

This first dataset, is my "initial" one: [{"x":0,"y":200},{"x":0,"y":180},{"x":0,"y":180},{"x":0,"y":170},{"x":0,"y":150},{"x":1,"y":90},{"x":1,"y":70},{"x":1,"y":155},{"x":1,"y":140},{"x":5,"y":90},{"x":10,"y":210},{"x":20,"y":50}]

This produces the following:

The "transformed X" dataset, which is the one that follows exactly what you've suggested, is the following: [{"x":24,"y":200},{"x":24,"y":180},{"x":24,"y":180},{"x":24,"y":170},{"x":24,"y":150},{"x":23,"y":90},{"x":23,"y":70},{"x":23,"y":155},{"x":23,"y":140},{"x":19,"y":90},{"x":14,"y":210},{"x":4,"y":50}]

And, even though it should produce an exact MIRROR of the first one, it produces the following, which indicates that it was also sorted by Y:

I have fixed this however by reversing the data set, thus also sorting it by value of X: [{"x":4,"y":50},{"x":14,"y":210},{"x":19,"y":90},{"x":23,"y":140},{"x":23,"y":155},{"x":23,"y":70},{"x":23,"y":90},{"x":24,"y":150},{"x":24,"y":170},{"x":24,"y":180},{"x":24,"y":180},{"x":24,"y":200}]

Producing the actual desired mirror of my first data set / plot:

This behavior was a bit confusing and hard to understand at first, but that might have just been the late hours... However I don't really see why it the data set should be sorted by Y, that can just lead to unexpected behaviors and sounds fairly arbitrary to me. Just wanted to mention all this if someone stumbles upon it and doesn't really know what's happening, hoping this would be of help.

Cody-G-G avatar Mar 22 '17 17:03 Cody-G-G

Is there any result?

HyperSimon avatar Apr 29 '17 09:04 HyperSimon

@Cody-G-G Agreed, the behavior is confusing.

@HyperSimon Are you asking if the sorting behavior has been made configurable? Or if its been made "less confusing"? Either way, no one has submitted a PR to address either of those issues, but you are welcome to.

marzolfb avatar Apr 30 '17 19:04 marzolfb