Use 2 Dropdown to plot a histogram

Dash Python
1

I’m looking for a way to graph a histogram for data respecting 2 Dropdown . I have to choose the value of firstcall and the value of the secondcall in order to plot the histogram. I don’t find lot of literature on this subject I hope one of you have already face to this.

Please find an excel file with some data and the code I try bellow:

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

df = pd.read_excel(
    "/Users/appelexcel.xlsx"
)

mgr_options = df["premierappel"].unique()
mgr_options_second = df["secondappel"].unique()

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

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

colors = {
    'background': '#FDFFFF',
    'text': '#0A25DC'
}

app.layout = html.Div(style={'backgroundColor': colors['background']},children=[
    html.H1(children='Call',
     style={
            'textAlign': 'center',
            'color': colors['text']
        }
        ),

    html.Div(
        [
            dcc.Dropdown(
                id="premierappel",
                options=[{
                    'label': i,
                    'value': i
                } for i in mgr_options],
                value='All First Call'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='secondcallgraph'), 
 #The first plot just give the 2nd call

    html.Div(
        [
            dcc.Dropdown(
                id="secondappel",
                options=[{
                    'label': i,
                    'value': i
                } for i in mgr_options_second],
                value='All Second Call'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='thirdcallgraph'), # second figure
])


@app.callback(
    dash.dependencies.Output('secondcallgraph', 'figure'),
    [dash.dependencies.Input('premierappel', 'value')])
def update_graph(premierappel):
    if premierappel == "All First Call":
        df_plot = df.copy()
    else:
        df_plot = df[df['premierappel'] == premierappel]

    #func=(lambda x: round(100*x.count()/df_plot.shape[0] ,2))
    pv = pd.pivot_table(
        df_plot,
        index=['Age_1_2'],
        columns=['secondappel'],
        values=['frequency_1_2'],
        aggfunc=sum,
        fill_value=0)

    trace1 = go.Bar(x=pv.index, y=pv[('frequency_1_2', 'modification')], name='Modification')
    trace2 = go.Bar(x=pv.index, y=pv[('frequency_1_2', 'informations')], name='Informations')
    trace3 = go.Bar(x=pv.index, y=pv[('frequency_1_2', 'autres')], name='Autres')
    trace4 = go.Bar(x=pv.index, y=pv[('frequency_1_2', 'achat')], name='Achat')

    return {
        'data': [trace1, trace2, trace3, trace4],
        'layout':
        go.Layout(
            title='Appel 2 / {}'.format(premierappel),
            xaxis=dict(
                title='Days after 1st Call'),
            yaxis=dict(
                title='Count'),
            barmode='stack')
    }

My problem appears here, how can I tell him to take into account 2 conditions (one on first call and one on the second call qualification) ?

@app.callback(
    dash.dependencies.Output('thirdcallgraph', 'figure'),
    [dash.dependencies.Input('premierappel', 'value'), dash.dependencies.Input('secondappel', 'value')])
def update_graph(premierappel,secondappel):
    if premierappel & secondappel == "All Second Call":
        df_plot = df.copy()
    else:
        df_plot = df[(df['premierappel']==premierappel) & (df['secondappel']==secondappel)]

    #func=(lambda x: round(100*x.count()/df_plot.shape[0] ,2))
    pv = pd.pivot_table(
        df_plot,
        index=['Age_2_3'],
        columns=['troisiemeappel'],
        values=['frequency_2_3'],
        aggfunc=sum,
        fill_value=0)

    trace1 = go.Bar(x=pv.index, y=pv[('frequency_2_3', 'modification')], name='Modification')
    trace2 = go.Bar(x=pv.index, y=pv[('frequency_2_3', 'informations')], name='Informations')
    trace3 = go.Bar(x=pv.index, y=pv[('frequency_2_3', 'autres')], name='Autres')
    trace4 = go.Bar(x=pv.index, y=pv[('frequency_2_3', 'achat')], name='Achat')

    return {
        'data': [trace1, trace2, trace3, trace4],
        'layout':
        go.Layout(
            title='Appel 2 / {}'.format(secondappel),
            xaxis=dict(
                title='Days after 2nd Call'),
            yaxis=dict(
                title='Count'),
            barmode='stack')
    }


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

Thanks for your time !

Age_._. : time between calls.

Frequence : should be frequency but it’s really random just to see how it’s working.

Please find the data bellow.

2

I want to create 3 dropdowns with bar graph but in output window only 3 dropdowns appears, graph is not reflected. Kindly help on the issue.

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

df = pd.read_excel("Agriculture_Exports1.xlsx")

stat_options = df["State"].unique()
prod_options = df["Product"].unique()
year_options = df["Year"].unique()

app = dash.Dash()

app.layout = html.Div([
    html.H1(
        children='US Agriculture Exports',
        className='six columns',
        style={
            'textAlign': 'center'
            # 'color': colors ['text']

        }
    ),
    html.Div(children='''
                       Agriculture commodity exports.
                       ''',
             className='nine columns',
             style={
                 'textAlign': 'center'
                 # 'color': colors['text']

             }
            ),

    html.Label("Select State"),
    html.Div(
        [
           dcc.Dropdown(
                id="State",
                options=[{
                    'label': i,
                    'value': i
               } for i in stat_options],
                value='All State'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),

    html.Label("Select Product"),
    html.Div(
        [
            dcc.Dropdown(
                id="Product",
                multi=True,
                options=[{
                    'label': i,
                    'value': i
                } for i in prod_options],
                value='All Product'),
            dcc.Checklist(id='select-all',
                          options=[{'label': 'Select All', 'value': 'All Products'}], values=[])
        ],

        style={'width': '25%',
               'display': 'inline-block'}),

    html.Label("Select Year"),
    html.Div(
        [
           dcc.Dropdown(
                id="Year",
                options=[{
                    'label': i,
                    'value': i
               } for i in year_options],
                value='All Year'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),

    dcc.Graph(id='funnel-graph'),

])


@app.callback(
        dash.dependencies.Output('funnel-graph', 'figure'),
      [dash.dependencies.Input('State', 'value'),dash.dependencies.Input('Product', 'value')])

def update_graph(State, Product, Year):

    if State & Product & Year == 'All State':
        df_plot = df.copy()
    else:
        df_plot = df[(df['State'] == State) & (df['Product'] == Product) & (df['Year'] == Year)]


    pv = pd.pivot_table(
        df_plot,
        index=['Product'],
        columns=["Year"],
        values=['Value'],
        aggfunc=sum,
        fill_value=0)

    Trace = go.Bar(x=pv.index, y=pv[('Value', 'A')])

    return {
        'data': [Trace],
        'layout':
            go.Layout(
                title='Agriculture export data ',
                barmode='stack')

            }


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

PFA sample data

Agriculture_Exports1
Agriculture_Exports11248×525 10.5 KB

3

hi @ravsgarg and welcome to the forum!

Could you provide some sample data and say what type of problem you are trying to solve?

Also, could you please edit your previous post to make all of you code formatted? (You can do that by clicking on the icon at the top of the edit window that looks like </>, then you will see:

’ ’ ’

type or paste code here

’ ’ ’