Lines between points on Scatter Plot

[car92]

I have a situation in which I wish to graph data for which the typical case sees X-values increase before decreasing again, whilst the Y-values simply decrease - picture a capital D (without the vertical line and each data point is discrete and will vary with an inputted array).

An example of the arrays may be:
x = [0, 20, 30, 35, 25, 0]
y = [100, 80, 60, 40, 20, 0]

As such, most of the typical line graph libraries available won't work as they all work for linearly increasing X-values (will only allow one y-value for each x). One solution that I had considered is rotating the graph 90 degrees and reversing the x and y values such that there is only one discrete x-value for all y-values.

However I was also wondering if it was possible to draw lines between the data points on your scatter plot and how one might go about doing this?
I understand that there might be some difficulty with ordering of values and perhaps the library isn't built for scatter plots to include any line drawing capability.

Any help would be much appreciated!

[ivnsch]

That should not be a problem because the axis values and the chart points are independent from each other.

Only the axis values have to be sorted. You can for example define the x-values like this to display regular intervals:

Array(stride(from: myXMin, through: myXMax, by: 5)).map {ChartAxisValueInt($0, labelSettings: labelSettings)}

Then you can pass your original, unsorted chartpoints to the chart points layer which is in charge of displaying the lines.

I suggest you look in the examples, there are many which show a line, and adjust them to do what you want. You probably will have to replace

chartPoints.map{$0.x}

with your function to determine the x values, as described above. map works in these examples because the x-values of the chart points are sorted.

That aside, there's no really a scatter plot in this library, but a scatter layer - to display lines between the points you just have to add a line layer on top (or behind) of it.

Edit:
I'm now not sure if I'm misinterpreting the question, if with x = [0, 20, 30, 35, 25, 0] you mean that the axis should show these values this is not possible, as the chart would have 2 possible locations to draw a point and would not know which one.

Besides of that, it's possible to have multiple y values for an x value.

[car92]

No, that works perfectly thank you for that.

I was wondering if you could help me with one more thing - I have attached an image of the situation. I've changed to the touch interactive graph as I see as you explained that works perfectly for my situation.

Now, since I have two y-values for the single x-value, I want the touch capability to be able to work for both values, whichever the user clicks closest to, however at current it seems that it only works for the upper values of y (in that image I had clicked at a y-value of 2). Is the touch setting adjusted such that it selects the value on the basis of x-value alone? Is there a way to change it so it goes to the nearest point alone?

Thanks again.

[ivnsch]

Ah, well, that is not supported. Currently it selects the first intersection, which depends on the order in which you added the chart points. But I think you can implement it easily, if you go to https://github.com/i-schuetz/SwiftCharts/blob/master/SwiftCharts/Layers/ChartPointsLineTrackerLayer.swift#L159 and modify it to collect all the intersections, then choose the one with the smallest distance to the touch point. If the code is generic enough you also can submit a PR after it :)

[ivnsch]

I implemented the handling for multiple intersections. It's now in master.
f21bb63

Thanks for the idea!