Line chart with scaling

[maximk0]

Hello. Can I use this library to create a line chart like the one in this video (x-axis: hours (timestamp), where the user can choose zoom: 3, 6, 12, or 24 hours (only preset options available to the user), with the latest value shown above the chart)?

video_2024-08-05_20-59-10.mp4

[gsteckman]

You can create a line chart with a time-based x-axis. User interaction can be done in the regular Compose way, by updating state variables which would update the x-axis time range, for example. The video is showing horizontal scrolling, which is only available on Android if the user pinch-zooms first. It might work on iOS too if Compose uses the same gesture controls but I don't have iOS devices to confirm. I know it doesn't work on Desktop or browser because Compose doesn't support the gestures on those platforms (last time I checked).

[maximk0]

Thank you for your answer. I've chosen this library to implement a plot for Android. Could you please tell me how I can change the scale for only the x-axis? Currently, zooming on the x-axis doesn't work. Zooming on the y-axis functions, but only when allowZooming is enabled for the user. I'm trying to implement horizontal scrolling for the plot, similar to what's shown in the video. The user shouldn’t be able to zoom manually but should be able to change the preset zoom value, which would adjust the zoom on the x-axis. Below, I’m attaching a screenshot of the code and a video demonstrating the result I’m trying to achieve.
And could you please tell me if there’s a way to detect taps on the plot? I’ve just come up with an idea: the user scrolls the screen, and in the code, I track this scrolling and change the time range for the x-axis using state variables, as you mentioned.

for.demonstration.mp4

[gsteckman]

User zooming for both x and y axes works for me on the Android emulator. I hadn't considered the use case of programmatically changing the zoom vs only through the user interface. The axis doesn't use a mutable state internally, so to have a zoom change cause a recomposition you should create a new axis model to cause recomposition. For example, store the axis model in a mutable state, and when the user chooses a new zoom factor create a new axis model with a zoom factor corresponding to what the user chose, and then update it in the mutable state. This should cause a recomposition of the XYGraph with the new axis model.

The panZoomEnabled boolean to XYGraph can be set to false to disable mouse-based zooming, but this will also disable panning. You can add a pointer input modifier on the XYGraph or one of the internal plots and then handle scrolling from there. An easier approach which would also benefit other users would be to split the panZoomEnabled flag into two, one for panEnabled and one for zoomEnabled, and in XYGraph control which transforms are computed based on those settings, e.g. around lines 183-184 by passing in those two flags to enable/disable computation of the pan and/or zoom changes. Would you be willing to try making that change and submitting a pull request?

[gsteckman]

I was incorrect above, the linear axes do use a mutableState to hold the current range (zoom) setting, so changing it even programmatically through the zoom or pan functions should cause recomposition. Separate pan/zoom enablement and gestures on non-Android platforms has been recently implemented courtesy of @asynchaizer.