Help on Interactive line plots

[Akhil.Ramagiri]

Hi,
Could I get some help with a line chart where we can plot the line on a chart using the equation y=mx+c, where m and c would be user inputs. The line should be plotted in a way such that users should be able to interact with the line directly on the chart and drag/rotate it which would then update m and c accordingly.

Thanks,
Akhil Ramagiri

[dawid.d]

Hello,

Welcome to the forum and thank you for reaching out.

Of course, we have a module that supports drag and drop, but I don't really know how you would want to manage it in the context of UX when you have two variables changing the slope and position of the entire line. So for the sake of presentation, I'm showing how to do it using sliders. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/L2qs6k1d/

Let me know if this is helpful to you
Best regards

[Akhil.Ramagiri]

Hello Dawid,

Thank you for your response. In the demo, the line is currently plotted using the slope equation. However, I am looking for a way to make the line on the plot interactive for users, allowing them to move the line directly on the plot without needing to adjust the input sliders manually. As users move the line, I want the input sliders to update automatically to reflect the new position of the line.

Typically, the line on the plot updates based on changes to the input fields. In this case, I’m seeking a two-way interaction: moving the line on the plot should update the input fields, and changes to the input fields should, in turn, update the line on the plot.


- Thanks,
Akhil Ramagiri

[dawid.d]

Hi Akhil,

I understand you're looking for a custom solution to make the line on the plot interactive. Since Highcharts charts are built using SVG elements, you can add event listeners directly to those elements to create your own interface for managing the chart. This approach allows you to implement a two-way interaction where moving the line updates the plot.

Additionally, methods like axis.toValue might be particularly useful for this task. You can use it to convert pixel values to axis values, which can help in updating the line's position based on user interactions.

You might also consider using built-in drag-and-drop functionality for this. While it could be a bit overkill for editing an entire line rather than individual points, it’s a potential approach depending on the complexity of interaction you're aiming for.

This kind of custom implementation goes beyond the scope of support we typically provide on the forum, but I hope this direction helps you get started with creating the interaction you need. If you need a more personalized solution, you may be interested in the premium support or the custom projects.

Thanks