Dash app.callback with Scatter and Bar Chart

Dash Python
1

Hello,

I’m just getting my feet wet with Dash and am trying to create a bar chart with line chart. I’m able to create this, however once I tried to use a checklist to filter the data, I ran into problems.

I’m not sure how to have multiple graph outputs (under the same graph id) in the app.callback function to update the figure. So far I only have the bar portion in the callback function, and I’m able to filter accordingly. However, I tried adding go.Scatter portions after go.Bar in the function but that did not work. Any ideas?

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

df = pd.read_csv(r’C:\Users\Sitara.Abraham\Downloads\Corporate Marketing Inbound Leads 2018 - 2018 Inbound Leads.csv’)
quarter = df.groupby([‘Quarter’,‘Industry Type’], as_index=False).count()
sql_q = df[df[‘SQL’]==‘Yes’]
sql_q = sql_q.groupby([‘Quarter’,‘Industry Type’], as_index=False).count()

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

colors = {
‘background’: ‘#111111’,
‘text’: ‘#7FDBFF’
}
app.layout = html.Div(style={‘backgroundColor’: colors[‘background’]},children=[
html.H1(
children=‘CORPORATE MARKETING INBOUND LEADS’,
style={
‘textAlign’: ‘center’,
‘color’: colors[‘text’]
}
),

dcc.Graph(
    id='inbounds-by-quarter',
    figure={
        'data': [
            go.Bar(
                x=quarter['Quarter'], 
                y=quarter['Inbound Date'],
                name='Total Leads'
            ),
            go.Scatter(
                x=sql_q['Quarter'],
                y=sql_q['Inbound Date'],
                name='SQLs',
                mode='markers'
            )
        ],


        'layout': go.Layout (
            title='Inbounds by Quarter',
            xaxis = {'title': 'Quarter'},
            yaxis = {'title': 'Inbounds'}
        )
    }
),

html.Label('Vertical'),
dcc.Checklist(
    id='vertical-filter',
    options=[
        {'label': 'Legal', 'value': 'Legal'},
        {'label': 'Home Services', 'value': 'Home Service'},
        {'label': 'Franchise', 'value': 'Franchise'},
        {'label': 'Healthcare', 'value': 'Healthcare'}
    ],
    values=['Legal', 'Home Service','Franchise','Healthcare'],
    labelStyle={'display':'inline-block'}
)

])

@app.callback(
dash.dependencies.Output(‘inbounds-by-quarter’, ‘figure’),
[dash.dependencies.Input(‘vertical-filter’, ‘values’)])
def update_figure(selected_vertical):
data = []
if ‘Legal’ in selected_vertical:
data.append(
{
‘x’:quarter[quarter[‘Industry Type’]==‘Legal’][‘Quarter’],
‘y’:quarter[quarter[‘Industry Type’]==‘Legal’][‘Inbound Date’],
‘type’: ‘bar’,
‘name’:‘Legal’
}
)
if ‘Home Service’ in selected_vertical:
data.append({
‘x’:quarter[quarter[‘Industry Type’]==‘Home Service’][‘Quarter’],
‘y’:quarter[quarter[‘Industry Type’]==‘Home Service’][‘Inbound Date’],
‘type’: ‘bar’,
‘name’:‘Home Service’
}
)
if ‘Franchise’ in selected_vertical:
data.append({
‘x’:quarter[quarter[‘Industry Type’]==‘Franchise’][‘Quarter’],
‘y’:quarter[quarter[‘Industry Type’]==‘Franchise’][‘Inbound Date’],
‘type’: ‘bar’,
‘name’:‘Franchise’
}
)
if ‘Healthcare’ in selected_vertical:
data.append({
‘x’:quarter[quarter[‘Industry Type’]==‘Healthcare’][‘Quarter’],
‘y’:quarter[quarter[‘Industry Type’]==‘Healthcare’][‘Inbound Date’],
‘type’: ‘bar’,
‘name’:‘Healthcare’
}
)
figure = {
‘data’:data,
‘layout’: {
‘title’: ‘Quarterly Inbounds by Vertical’,
‘xaxis’: dict(
title=‘Quarter’,
titlefont=dict(
family=‘Courier New, monospace’,
size=20,
color=’#7f7f7f’

        )),
        'yaxis': dict(
            title='Inbound Count',
            titlefont=dict(
            family='Helvetica, monospace',
            size=20,
            color='#7f7f7f'
       
        ))
    }
}
return figure

if name == ‘main’:
app.run_server(debug=True)

2

Quick answer here: I think you can’t have multiple figures in a given graph, however, you can have multiple traces.

Could you please format the code in your post, so that it’s easier to read? (Just select all the code, and then click on the </> button (or put ``` prior and after your code).