Gantt charts on Dash

Dash Python
1

Hello,

How can I display gantt charts on Dash?
Is not available by import plotly.graph_objs as go, I just get this methods from go:

[‘AngularAxis’, ‘Annotation’, ‘Annotations’, ‘Area’, ‘Bar’, ‘Box’, ‘Candlestick’, ‘Carpet’, ‘Choropleth’, ‘ColorBar’, ‘Contour’, ‘Contourcarpet’, ‘Contours’, ‘Data’, ‘ErrorX’, ‘ErrorY’, ‘ErrorZ’, ‘Figure’, ‘Font’, ‘Frames’, ‘Heatmap’, ‘Heatmapgl’, ‘Histogram’, ‘Histogram2d’, ‘Histogram2dContour’, ‘Histogram2dcontour’, ‘Layout’, ‘Legend’, ‘Line’, ‘Margin’, ‘Marker’, ‘Mesh3d’, ‘Ohlc’, ‘Parcoords’, ‘Pie’, ‘Pointcloud’, ‘RadialAxis’, ‘Sankey’, ‘Scatter’, ‘Scatter3d’, ‘Scattercarpet’, ‘Scattergeo’, ‘Scattergl’, ‘Scattermapbox’, ‘Scatterternary’, ‘Scene’, ‘Stream’, ‘Surface’, ‘Trace’, ‘XAxis’, ‘XBins’, ‘YAxis’, ‘YBins’, ‘ZAxis’, ‘builtins’, ‘cached’, ‘doc’, ‘file’, ‘loader’, ‘name’, ‘package’, ‘path’, ‘spec’, ‘absolute_import’, ‘graph_objs’, ‘graph_objs_tools’]

Thank you

2 Likes
2

See https://plot.ly/python/gantt/ for some docs on creating gantt charts. Gantt charts in Plotly are not a formal plot type, they are created through a combination of other chart types, which is why you don’t see gantt in graph_objs.

You can adapt the examples in the documentation by passing the results of ff.create_gantt into the figure property of the dcc.Graph() component. For example:

import dash_core_components as dcc
import plotly.figure_factory as ff

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)
dcc.Graph(figure=fig, id='gantt')
2 Likes
3

I have it working now
Thank you @chriddyp :grinning:

2 Likes
4

How do you make Gantt charts in Dash responsive?

I tried using the recently implemented config={‘autosizable’:True} option used to create a dcc.Graph object but it does not seem to work.

When the page is being loaded it is possible to see an autosized grid but the gantt chart then overrides it with its default dimensions of 900x600.

Is it possible to dynamically change the width parameter when creating the gantt figure using figure_factory?

2 Likes
5

Good to hear, can you position it correctly within dash ? I’m having a hard time since it’s positioning way too much to the left.

6

I am facing the same issues, the Gantt chart is breaking out of it’s bootstrap column and I can’t seem to make it stop. Was this ever resolved?

8

@ douglasnavarro

I solved it because I AM A GENIUS!! haha

I am working with bootstrap und autosizable is not working.

I used
fig[‘layout’].pop(‘height’, None)
fig[‘layout’].pop(‘width’, None)

to remove height and width information from the figure that figure_factory.create_gantt(…) returned.

Now it works!

9

Hey @joh-mue, that’s awesome that you figured it out, but when I use your code I get error:

AttributeError: ‘Layout’ object has no attribute ‘pop’

My code is:

fig = ff.create_gantt(df, group_tasks=True, title='', showgrid_y=True)
fig['layout'].pop('width', None)

Any ideas? I’m kind of new to python so I’m hoping it’s just something stupid I’m doing.

Thanks!

10

Hey,
pop() is a method to return and remove a key-value pair from a dictionary if present. Layout was a simple dictionary when I tried it, so right now I suspect that maybe the underlying code maybe changed as the fig[‘layout’] call returns a Layout object instead of a plain dictionary? I don’t see anything obvious in your code that would be wrong.

The key to my solution is to remove the width and height attributes entirely from the layout. If you look at the Layout class you might find a better fix.

(I used Dash v0.35.1)

11

i suspect that’s what’s happening as well. we’re gonna add .pop to the layout objects soon, so that the work a little bit more like their equivalent dicts, but for now try ‘.update(width=None)’