Plotly Animations not working?

Greetings,

So I’ve dug through the docs to no avail, other than to reach a suspicion that the Plotly graph_objects.Frames (and the corresponding express features) perhaps haven’t been ported to anvil?

The plotly feature I’m looking to utilize is outlined here in more detail here:

On a local machine or jupyter notebook the examples from there, and the code below, works and produces a nice animation.

On Anvil, computing fig serverside and returning it produces a static plot (with the play and stop buttons attached, but which do nothing).

Client side I get the standard module not found error if trying to import or use “Figure” or “Frames” from plotly.

example:
Server module:


  import pandas as pd
  import plotly.express as px

  @anvil.server.callable
  def show_animated_plot()
    data = pd.Dataframe(
      {'x': {0: 21, 1: 18, 2: 17, 3: 20, 4: 23, 5: 17, 6: 20, 7: 20, 8: 17, 9: 21, 10: 25, 11: 23},
       'y': {0: 23, 1: 25, 2: 25, 3: 25, 4: 21, 5: 21, 6: 24, 7: 24, 8: 25, 9: 24, 10: 20, 11: 16},
       'day': {0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11}})

    fig = px.scatter(data, x="x", y="y", animation_frame="day")
    return fig

client module

  fig = anvil.server.call('show_animated_plot')
  self.plot_1.figure = fig

Hopefully I’m just missing something simple here.

Cheers,
Stuart

hi @stuartlcooper and welcome to the forum,

I’m not sure that anvil supports animation with plotly :frowning_face: .

The autocomplete doesn’t have go.Frame or go.Layout().frames which suggests to me that it’s missing this feature…

Hopefully someone can confirm either way for you.

Alright, I used go.Figure(…, frames=myframes, …) where myframes was a list of dicts and the animations didn’t work either. go.Frames(…) not being supported might explain this, of course, as the internal conversion from list of dicts to go.Frames() seems to be impossible then.

You could just use a timer component to animated the plot as shown in this app:
https://anvil.works/build#clone:TPODRSE7AE4EIFKD=FQGDPTKVCGWPUKUASNQRSG7J

Does this help @stuartlcooper?

Thanks for the suggestions @Matthias.

I mean, yes, sure, the timer works in a fashion, but the solution is subpar compared to the actual animated version because the points of the scatterplot simply redraw each time, whereas the animated version smoothly interpolates the movement of the points with each update.

In this example I’m using it for a busy scatterplot coloured by groupings, so the redraw method effectively just randomly teleports 3 different groups of coloured dots around the plot with each update with no way to visually track any particular dot, whereas the animated version smoothly slides the markers around in an easy to follow manner.

I understand, but you can just do the interpolation yourself in a few lines of code
https://anvil.works/build#clone:TPODRSE7AE4EIFKD=FQGDPTKVCGWPUKUASNQRSG7J

Maybe not as comfortable as the animations with px, but a workaround :slight_smile: