Displaying a plotly gannt chart to a form

Anvil Q&A
1

what is the recommended way to display a plotly gannt chart in a form

2

What have you tried?

3

on the server:

import plotly.figure_factory as ff

@anvil.server.callable
def get_gannt(project_id):
    schedules = app_tables.schedule.search(Project_Id = project_id)
    df= []
    for schedule in schedules:
      df.append(dict(Task = schedule['Phase'], Start = schedule['Start_Date'], Finish = schedule['End_date'], Resources = schedule['Status'] ))
    
    colours = dict(
                   Planned = 'rgb(255,255,0)',
                   Ongoing = 'rgb(0,255,0)',
                   Late = 'rgb(255,0,0)',
                   Completed = 'rgb(0,255,0)',
                   Hold = 'rgb(0,0,255)'
                  )
    
    fig = ff.create_gannt(df,colors = colours,
                          index_col = "Resource",
                          title =  project_name,
                          show_colorbar = True,
                          bar_width = 0.8,
                          showgrid_x = True,
                          showgrid_y = True
                         )
    return fig

on the client:

self.schedule_gannt_chart.data = anvil.server.call('get_gannt', project_id)

i am getting this error
ModuleNotFoundError: No module named ‘plotly.figure_factory’

4

Figure factory is not implemented yet. Perhaps when Anvil’s Plotly version is updated, that will be available (although I don’t know much about Plotly in general).

Have you considered modifying a bar chart by adjusting the base of each bar? This will resemble a Gantt chart.

base=[10,20,30] in a plotly bar chart specification will adjust the bases of each bar so that they start at those values.

5

this is what i got so far, not sure what im doing wrong
https://anvil.works/build#clone:GRQWHEAWAPUAXGSQ=2LPRQVDMG2PW5OL5GZBKKGTY

6

In terms of just getting the chart built, can you show a plotly chart that you created and its related code (just the code for the plotly chart)? Did you try adapting the plotly example in the Anvil docs with base=[10,20,30] as I mention above?

7

https://anvil.works/build#clone:C7XARRGXLFDSS53E=HOXFSW3O3OFDNJK2YKS2MH56

8

Looks like you are on the right track. You will have to figure out how to deal with plotting the date times along with their bases. In my testing, the length of the bar was always equal to the x value plus the base value and this was not what I expected (I expected the length of the bar to be x minus base).

Here’s some example code that works with integers, but not with date time objects (that is, the time delta objects cannot be used with this code directly). However, perhaps you could use the integer values of date objects and set the labels to the readable strings. Good luck!

Perhaps others will have a better solution.

actual_x=[2017, 2018]
base=[2016, 2019]
adjusted_x=[a-b for a,b in zip(actual_x, base)]

self.plot_1.data=[go.Bar(
                x=adjusted_x,
                y=['task 1', 'task 2'],
                orientation = 'h',
                base=base
                  )]

self.plot_1.layout.xaxis.range = [2016,2019]
1 Like
9

Here is a clone showing how to make a Gannt chart with the Plotly module (as figure_factory is now available on the server side).

Clone:
https://anvil.works/build#clone:XKCOOFPCMRGVWD35=DWU432KT5SA5IVNMJBSH2XY4

Server:

import anvil.server
from plotly import figure_factory as ff

@anvil.server.callable
def get_gannt():

  df = [dict(Task="Job A", Start='2009-01-01', Finish='2009-02-28'),
      dict(Task="Job B", Start='2009-03-05', Finish='2009-04-15'),
      dict(Task="Job C", Start='2009-02-20', Finish='2009-05-30')]

  fig = ff.create_gantt(df)
  return fig

Client:

# in a form with a plot component on it
fig=anvil.server.call('get_gannt')
self.plot_1.figure=fig
5 Likes