Add scrolling options to plots

Dash Python
1

Hi I am relatively new to dash and have been trying to recreate a dashboard I made in tableau using Dash.I am trying to create the following image:
image

my questions are the following:

  1. How can I add vertical scroll to my bar graph?
  2. How can I make that particular graph in general. I tried using going the subplot route but I cant seem to get the image to populate on my dashboard. I used the following link to create a sub plot version of the graph. Link: https://plot.ly/python/subplots/

I have tried using the following to make the image populate on my dashboard:
@app.callback(Output(‘monthly_mins_model’, ‘figure’),
[Input(‘model_filter’, ‘value’),
Input(‘Site_Filter’, ‘value’),
Input(‘Machine_Number_Filter’, ‘value’),
Input(‘Utilization_Filter’, ‘value’),
Input(‘Country_Filter’, ‘value’)
])
def update_monthly_mins_model_graph(model,site,machine,utilization,country):
temp = filter_raw_dataframe(raw_data, model,site,machine,utilization,country)
temp = temp.groupby([‘Year’,‘Month’,‘machine_name_matched’]).mean()[‘mins’]
temp = temp.reset_index()
temp = temp.sort_values([‘Year’, ‘Month’], ascending=[True, True])
temp[‘Month_Year’] = temp.Month.astype(‘str’) + ‘/’ + temp.Year.astype(‘str’)

fig = tools.make_subplots(rows=len(temp.machine_name_matched.unique()), cols=1)
for i in temp.machine_name_matched.unique():
    i = 0
    fig.append(go.Bar(
                x=temp[temp.machine_name_matched==i].Month_Year,
                y=temp[temp.machine_name_matched==i].mins,
                showlegend=True,
                orientation = 'v'
            ),i+1,1)
    i +=1

fig['layout'].update(title='Stacked subplots')

return py.iplot(fig, filename=‘stacked-subplots’) # I have also tried to return just the fig

Any help with this will be much appreciated.

2

You’ll want to just return the fig - The figure property of your dcc.Graph takes a “fig” (the conventional variable name that you see in the plot.ly/python docs)

The best thing that you can do right now is constrain the height of the dcc.Graph container and overflow scroll - note that the x-axis labels won’t be visible until you scroll to the bottom:

html.Div(dcc.Graph(...), style={'overflowY': 'scroll', 'height': 500})

Subplots is a good way to go. If your data is formatted in a certain way, you could also try out the create_facet_grid “figure factory” which will generate the subplots for you: Facet and trellis plots in Python

Good luck!

1 Like
3

Thanks Chriddup. The create_facet_grid function was exactly what I was looking for. Now I have the image made the way I want and now my challenge is controlling the width of those graphs. I can manually change the width to match the size of the screen but when I scale to a smaller screen the images dont resize (Only the gird type graphs). I can manually change the width to match my container of five columns which ended up being 904.105px.

So is there a way to say that we want the grid graph to take up 100% of the width of the container it is in. I have attached an image of the image as of now. Again any help with be highly appreciated.

image
image1501×500 40.4 KB

4

Yeah, if layout.autosize=True, then it should expand to the container that it is in. I believe that is the default, but I’m not sure.

5

Hi, I am facing a similar issue with the x-axis and tried to apply style={'overflowX': 'scroll', 'width': '1080'}. I got the following results:

image
image.png1005×246 26.5 KB

As you can see, the scrollbar is now present but am unable to scroll through the data. Just wanted to know if there is a way to auto increase the space between my plots and scroll through them? Thank you.

6

Hi, just wanted to update. I’m using autoscale:False as an alternative.

7

if you want to have a horizontal scroll bar in the graph container, you can make the figure.layout.width really large (like 5000) and then set the width of the container to be smaller than that and have a scroll bar (dcc.Graph(style={width: 600, overflowY: scroll}, …)

1 Like
8

Is there a way to add scrolling options to plots in pure plotly? Or do I need to add Dash?

9

This is a very old thread—jazz trumpet great Roy Hargrove was still alive and performing back then!

Now 4 years later, is there a way to add vertical scrollbars to a bar chart, in a way that keeps the x-axis labels visible?

3 Likes