Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Bar chart using pandas

Having some trouble creating multiple bar charts in Dash. I have a pandas data frame with 6 X variables and 3 y variables for each X. I have successfully gotten the dropdown to appear but I am struggling with updating the graph to reflect a bar chart based off a chosen x factor and a chosen y factor. I am nearly certain my callback function must be completely wrong but can’t figure out where.

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.graph_objs as go

import pandas as pd
import numpy as np

app = dash.Dash()
df=pd.read_csv(‘Factors.csv’)

app.layout = html.Div([
html.H2(‘Quant Dashboard’),
html.Div([
# Feature Selector 1
html.Div([
dcc.Dropdown(
id=‘graph-dropdown-1’,
options=[{‘label’: i, ‘value’: i} for i in df.Factor.unique()],
value=df.Factor[0]
)
]
),
# Feature Selector 2
html.Div([
dcc.Dropdown(
id=‘graph-dropdown-2’,
options=[{‘label’: i, ‘value’: i} for i in df.columns[1:4]],
value=df.columns[1],

    ),
    # Main Plot
    dcc.Graph(id='main-graph', config={'displayModeBar': False})
],
style={'width': '70%',
       'margin-left': 'auto',
       'margin-right': 'auto'
})

])
])

@app.callback(
Output(‘main-graph’, ‘figure’),
[Input(‘graph-dropdown-1’, ‘value’)])
Input(‘graph-dropdown-2’,‘value’)])
def graph_maker(factor, date):

colors = ['red', 'green', 'blue','yellow','orange','black']

data = [
    go.Bar(
        x=df['Factor'],
        y=df['YTD']
    ),
    
    go.Bar(
        x=df['Factor'],
        y=df['MTD']
    ),
    
    go.Bar(
        x=df['Factor'],
        y=df['Oneday']
    
    )
]


layout = go.Layout(
    xaxis={'title': factor},
    yaxis={'title': date},
    hovermode='closest',
    margin={'l': '5%', 'b': '5%', 't': 0, 'r': 0},
)

return {'data': data, 'layout': layout}

if __name__ == '__main__':
app.run_server(debug=False)

I’m not able to properly diagnose without more context, but from what I see it looks like you’re not using the factor and date variables. The issue might be as simple as mistakenly surrounding the factor variable in quotes (df['Factor'] instead of df[factor], which corresponds to the input variable).

I believe you have a typo in your callback. You have this:

@app.callback(
    Output(‘main-graph’, ‘figure’),
    [Input(‘graph-dropdown-1’, ‘value’)])
    Input(‘graph-dropdown-2’,‘value’)]) # here is paranthesis missmatch

You want something like this:

@app.callback(
    Output(‘main-graph’, ‘figure’),
    [Input(‘graph-dropdown-1’, ‘value’), # I removed some paranthesis here
    Input(‘graph-dropdown-2’,‘value’)])

Now we give a list of Input to our callback, which should be right. :slightly_smiling_face: