Accessing plotly figure_factory figure properties on client-side

Anvil Q&A
1

Any advice for trying to access the trace properties of a plotly gannt chart on the client side.
My intention is to define a click event for when the user clicks on a one of the traces, and take user input to change the start or end date of that trace on the gannt chart. Then update the trace with the new date.

https://anvil.works/build#clone:EFNZECOSZFEW4GUS=N6RUXZY4UU6RWOGFVTWRK43E

2

I don’t think Anvil’s standard event system can register clicks inside the Plotly chart (if that is part of what you need). well, that’s just wrong but I redeemed myself eventually…

You could go a slightly different route and have dropdowns (or other Anvil components) that allow users to type in/select their changes. This way, events can be rigged up accordingly that would eventually lead to the chart refreshing and showing the new data (all on the client if you wish).

Yes! It looks like you can access and change the data directly in the client. For example:

self.plot_1.data[0]['y']=[1, 1, 1.2, 1.2]
self.plot_1.redraw()

junk_junk

3

you are understanding what i am after. I am having trouble tracking which trace is clicked on so i can apply the changes the user makes back to that trace.

4

Edit: Sorry, I see that the plot component has some promising event handlers. I did not realize that. Hmm, let me see if I can get something to work here…

As I mentioned, without non-standard Anvil/web wizardry I don’t think you can know what the user clicked on inside of a Plotly figure (to the best of my limited knowledge). Still in the process of redeeming myself…

What have you tried and do you need to know what they clicked on if they can indicate the desired changes through other means like those I mentioned above?

I’m investigating plotly click events which may make it possible to register events and bring them back to Anvil without much wizardry. You could try messing around with that (I am but not having much luck).

1 Like
5

It seems then when i try to define a new click_event anvil is giving a TypeError: ‘WrappedObject’ object is not callable. Seems to be the same problem when I look at the plot.data print out. the only data exposed by the anvil click event is points looks like this [{‘y’: 2, ‘x’: ‘2009-05-30’, ‘curve_number’: 5, ‘point_number’: 1}] the curve number is a trace identifier but i cannot see a way of mapping it back to the information stored in plot.data

6

Yes this is where I am stuck as well.

7

Hmm,

I think I’ve gotten somewhere here. If we take the curve number as the index of the traces in the data, this seems to work in terms of verifying the corresponding traces in the data.

# standard Anvil click event callback for the plot
def update_point(self, **event_args):
    
 ind=event_args['points'][0]['curve_number']

 # seems to print what I've clicked on
 print(self.plot_1.data[ind]['y'], self.plot_1.data[ind]['x'])

Based on this you should be able to simply reassign new values to the clicked traces as you see fit (I’ve shown an example of updating the data and redrawing the plot above).

Here is what it could look like just so you get a basic idea (I parsed the date strings and added to the month value each time a given trace is clicked).

junk_junk
junk_junk1080×608 994 KB

1 Like
8

can you send me a clone of this app, i am able to update the details but its not redrawing the plot properly, the hover label is in the right place with the right details but the bar is not redrawing

https://anvil.works/build#clone:EFNZECOSZFEW4GUS=N6RUXZY4UU6RWOGFVTWRK43E

9

I believe you are not setting both elements in the X data list to the new date value.

Try this app and see that two elements in the X data list are adjusted so that the trace end date is extended:
https://anvil.works/build#clone:YADLNHPUVOYIB6MW=3AEORTXIIQJJ7FRGA2ET6YVM

You should be able to adapt this concept to your specific needs I believe.

10

I finally figured it out, below is a clone if your interested, there is mapping between between the curve_number and the corresponding index of that curve in the plot.data structure of curve_number - 3.
plot.data[curve_number] maps to the traces style information, so the x value here needs to be changed to update the hover labels position and information, while the plot.data[curve_number-3] maps to the actual values of the trace to be drawn on the plot, Additionally the x_values of the trace are [start_date, end_date, end_date, start_date] so both references to the date you want to change need to be changed

https://anvil.works/build#clone:EFNZECOSZFEW4GUS=N6RUXZY4UU6RWOGFVTWRK43E

2 Likes