How to connect dropdown to bar graph?

Dash Python
1

Hi Team,@charming data

I want to add multiple bar graphs for each and every drop down that is selected let me know what exactly needs to be added i have added another dropdown lable and a bar graph but it not getting displayed

Bar charts are useful for displaying data that is classified into nominal or ordinal categories.

A bar chart uses bars to show comparisons between categories of data. A bar chart will always have two axis.

One axis will generally have numerical values, and the other will describe the types of categories being compared.

import pandas as pd #(version 0.24.2)
import datetime as dt
import dash #(version 1.0.0)
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import plotly #(version 4.4.1)
import plotly.express as px

df = pd.read_csv(r"C:\Users\Adnan\Desktop\Mar2020.csv")

app = dash.Dash(name)

#-------------------------------------------------------------------------------------
app.layout = html.Div([

    html.Div([
        html.Pre(children= "March Analysis",
        style={"text-align": "center", "font-size":"100%", "color":"black"})
    ]),

    html.Div([
        html.Label(['March2020'],style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='xaxis_raditem',
            options=[
                     {'label': 'March2020', 'value': 'Mar'},
                     {'label': 'Apr2020', 'value': 'Apr'},  

            ],
            value='Mar',
            style={"width": "50%"}
        ),
    ]),

html.Div([
    dcc.Graph(id='the_graph')
]),

])

#-------------------------------------------------------------------------------------
@app.callback(
Output(component_id=‘the_graph’, component_property=‘figure’),
[Input(component_id=‘xaxis_raditem’, component_property=‘value’)]
)

def update_graph(x_axis):

dff = df,df1

# print(dff[[x_axis,y_axis]][:1])

barchart=px.bar(
        data_frame=dff,
        x=df['TranType'],
        y=df['Count'],
        title='Output'
        # facet_col='Borough',
        # color='Borough',
        # barmode='group',
        )
barchart=px.bar(
        data_frame=dff,
        x=df['TranApril'],
        y=df['Count1'],
        title='Output'
        # facet_col='Borough',
        # color='Borough',
        # barmode='group',
        )

barchart.update_layout(xaxis={'categoryorder':'total ascending'}
                       )

return (barchart)

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

2

@Adnan
Do you want two separate dropdowns? and each dropdown to output a separate bar graph?

3

Hi Adam,

For every drop down i want a separate bar graph and the data will be from same csv file or diffrent that i will store in different data frame just let me know what changes in the code is required

4

then you need multiple dropdowns and multiple outputs. something like this:

df = pd.read_csv(r"C:\Users\Adnan\Desktop\Mar2020.csv")

app = dash.Dash(name)

app.layout = html.Div([
    html.Div([
        html.Pre(children="March Analysis",
                 style={"text-align": "center", "font-size": "100%", "color": "black"})
    ]),

    html.Div([
        html.Label(['March2020'], style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='drop1',
            options=[
                {'label': 'March2020', 'value': 'Mar'},
                {'label': 'Apr2020', 'value': 'Apr'},

            ],
            value='Mar',
            style={"width": "50%"}
        ),
    ]),

    html.Div([
        html.Label(['March2021'], style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='drop2',
            options=[
                {'label': 'March2020', 'value': 'Mar'},
                {'label': 'Apr2020', 'value': 'Apr'},

            ],
            value='Apr',
            style={"width": "50%"}
        ),
    ]),

    html.Div([
        dcc.Graph(id='bar1')
    ]),

    html.Div([
        dcc.Graph(id='bar2')
    ]),
])


@app.callback(
    [Output(component_id='bar1', component_property='figure'),
     Output(component_id='bar2', component_property='figure')],
    [Input(component_id='drop1', component_property='value'),
     Input(component_id='drop2', component_property='value')]
)
def update_graph(drop1, drop2):
    dff1 = df[df['month'] == drop1]
    dff2 = df[df['month'] == drop2]

    barchart1 = px.bar(
        data_frame=dff1,
        x='TranType',
        y='Count',
        title='Output'
    )
    
    barchart2 = px.bar(
        data_frame=dff2,
        x='TranApril',
        y='Count1',
        title='Output'
    )

    return barchart1, barchart2


if name == '__main__':
    app.run_server()
5

Hi charming data thanks for prominent reply i ran the code as shared by you but it is not displaying the graphsand i only want own drop down not multiple drop down

also please explain me why have you used

def update_graph(drop1, drop2):
dff1 = df[df[‘month’] == drop1]
dff2 = df[df[‘month’] == drop2]

df month there is no such column for month in my data

My data is this :

TranType Count TranApril CountA
I 10215251 I 2000000
T 66309715 T 80202302
MB 7070014 MB 6023205
O 32713 O 53536
A 1368785 A 7894253
Miss 1780420 Mi 3216547
Balance 26470660 Balance 42356987
Total 109970252 Total 141746830