Plotly : Figure Factory, Sub Plots, Shapes

[mcmasty]

Hello,

I am trying to create a Timeline in my app.

I am thinking of using a Plotly Gantt Chart to create the timeline, but only have 1 resource, so it would be a sequential set of blocks on the timeline.

I was using this plotly gantt info as a reference.

My code is blowing up on an import

import plotly.figure_factory as ff

generating the following error message:
ImportError: No module named plotly.figure_factory

Not sure if this is a feature request or not, but in case its an easy additional installation, can you add the Figure Factory to Client Side Anvil Code ?

Any preferred work around ?

---

In addition to the above, I am trying to make a plot with a sub-plot

The following package is not importing from plotly.subplots import make_subplots the error is ImportError: No module named plotly.subplots

Any suggestions on how to work around this ?

thanks in advance!

Cheers,
Tyler

[mcmasty]

Adding Shapes to the list of things that I am struggling with …

Plotly help page

The semantics are different inside anvil, but the contextual help says …

That Shape should be available …

When I try to create a list of shapes (following Plotly reference docs) … I get the following error from Anvil

as follows

    self.plot_weekly_actual.layout.shapes = [  
      go.Shape(
          type="rect",
          x0=3,
          y0=1,
          x1=6,
          y1=2,
          line=dict(
              color="RoyalBlue",
              width=2,
          ),
          fillcolor="LightSkyBlue",
      ),


    ]

Where plot_weekly_actual is the name of the Plot Compontent I dropped on my form.

There error is:

AttributeError: 'module' object has no attribute 'Shape'

Any Suggestions how I can add shapes to my Plots ?

[bridget]

Hi @mcmasty,

You’re seeing these errors as we’re not currently running Plotly v4. I’m bumping the API upgrade in feature requests!

Using the JS API is currently the way to do this.

Here’s a clone link with examples of using the JS API to create the charts you’re after, click the links in the sidebar to see different examples.

https://anvil.works/build#clone:MAWVW4QMRZLWTIL3=FYWW6JCV2EOFORGXDX6FSOKH

The charts are based on the following documentation:

• Shapes
• Subplots
• As far as I can see, Timelines aren’t officially supported in the JS API, but I found this Codepen which may be near enough what you’re after!

[mcmasty]

@bridget

Thanks! I’ll poke around these examples.

Out of curiosity, any (very rough) estimate when the API upgrade might get scheduled ?

I have a few things I’m juggling, so if it’s going to be like 3-6 weeks, I’ll probably wait it out. If its going to be like 3-6 months, I’ll look at swapping over to JS API method.

Thanks again.

Cheers,
Tyler

[bridget]

Hi @mcmasty,

We’re hoping to get the API updated before Christmas.

I’ll let you know when we do!

[rickhurlbatt]

This timeline plot would be a game changer for dashboards and super useful for a range of calendar based reports. I don’t suppose there will be an accompanying tutorial ?

[dp.nankivell]

Hi Bridget,

Any updates on this implementation ?

[bridget]

@dp.nankivell we’re still working on the upgrade but it’s coming soon!

@rickhurlbatt I’ll see what we can do

[rickhurlbatt]

Excellent thanks @bridget

[dp.nankivell]

Thanks Bridget, I am hanging out for it. To take advantage of the gantt charts

[mjmare]

Any progress? I really need this for distplots.

[boruchwoolstone]

I am waiting on this too

[meredydd]

I have good news for you!

Plotly 4: It's Here!

This has been such a popular feature request that I’m posting a quick announcement, rather than waiting for the March Update: We have upgraded Anvil to Plotly version 4! It’s backwards-compatible, so your existing code still works, but you can now take advantage of Shapes, distplots, plotly.express, subplots, figure_factory, and more! Some of these features are only available in Server Modules (and some of them use numpy, which only works in Full Python), but of course you can return Plotly cha…

[dp.nankivell]

That’s great news. I’m super happy with this and the anvils teams work to bring us this feature

[sjean149]

Is there any way to make plotly.express available in client mode?

[bridget]

Hi @sjean149,

The Plotly Express library depends on numpy, which is why it isn’t available client-side. It would be quite the undertaking to compile numpy to Javascript!

[benjamin.earl.taylor]

Has anyone been able to get go.Shape() to work since @meredydd announced the upgrade? I’m getting the same attribute error that @mcmasty got back in Oct. '19 in both client and server side modules.

[meredydd]

Hi @benjamin.earl.taylor,

Are you using the Full Python runtime? Numpy isn’t available in Basic Python.

[bridget]

Hi @benjamin.earl.taylor,

There are two ways to draw shapes in Plotly v4: scatter traces and layout.shapes.

Here’s an app that shows how to use both versions in the client-side:

https://anvil.works/build#clone:NE65TDMGSHFSLRUD=SKMVDXMKDL4LG34G3PNU424J

[benjamin.earl.taylor]

Thank you @bridget. Looks like creating Shape instances directly is not how this is done. Your example helped to bridge the gap between the plotly docs and usage in Anvil.