Getting xaxis range on zoom event in chart

Queries and Resources
,
1

Hi everybody,

I have a chart plotting timeseries data from a database and I want to use the daterange from the chart in DateTime objects in a Form.

I.e. the default values of the two DateTime objects should be the start and end of the x-axis in the chart and should update on a zoom event.

In plotly, I believe, you can use the "relayout" event handling method, but I am unsure of how to access that in ReTool, as the chart object doesn't seem to have any relevant attributes.

So now, I am wondering if I can manage to do it using a JSquery?

This does pretty much what I want, but I have no idea how to do this in ReTool, using the chart attributes...

I am very new to JS, so any help is appreciated!

2

Hi @Daniel_R

I haven't found a way to do this with our current Chart component :disappointed: It seems like we don't expose a place to add zoom events. We are tracking requests for a more customizable chart component, so hopefully we can have more native support for this in the future :crossed_fingers:

That said, you already have that sample code, so it should be doable with a custom component. You can read more in our docs about how to pass data from components (such as date time components in a form), to your custom component. But I went ahead and pasted the plotly code you linked into a custom component as an example:

You can add the html code and then pass the JS code in as a script. You'll also want to change the x axis & y axis data for a date x axis.