Bar chart using pandas

Dash Python
1

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)
2

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).

4

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: