NK09
NK09

Reputation: 195

Make interactive bar plot with 2 columns and date column as dropdown using Dash?

I am making a bar plot using Dash with date column as the dropdown. This would be an interactive graph which would change if user changes the date dropdown.

Below is the sample dataframe:

message  Date     Count
Hi       01/08/19   10
Bye      01/08/19   20
GN       01/08/19   30
Hi       02/08/19   15
Bye      02/08/19   25
GN       02/08/19   35

Below is my current code. I am using Dash for the first time, so there is some error.

app = dash.Dash()

app.layout = html.Div([

    dcc.Dropdown(
        id = 'first_dropdown',
        options = df.Date,
        placeholder='Select a Date'
    )
    html.Div(id='output-graph')

])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='first_dropdown', component_property='options')]
)


    return dcc.Graph(id = 'Bar_Plor', 
                  figure = {
                      'data' : [
                          {'x':df.message, 'y':df.count, 'type':'bar', 'name':'First Chart'}
                          ]
                      })


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

Upvotes: 0

Views: 1186

Answers (2)

NK09
NK09

Reputation: 195

app = dash.Dash()

def createObject(x):
    options = []
    for i in x:
        options.append({
            'label': i,
            'value': i
        })
    return options

df = pd.DataFrame({'message1': ['Hi', 'Bye', 'GN', 'Hi', 'Bye', 'GN'],
                   'date1': ['01/08/19', '01/08/19', '01/08/19', '02/08/19', '02/08/19', '02/08/19'],
                   'count1': [10, 20, 30, 15, 25, 35]})

app.layout = html.Div([


    html.Br(),
    html.Br(),

    dcc.Dropdown(
        id = 'first_dropdown',
        options = createObject(df.date1.unique()),
        placeholder='Select a Date'
    ),

    html.Div(id='output-graph')
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='first_dropdown', component_property='value')]
    )

def update_output_div(input_value):
    return dcc.Graph(id = 'Bar_Plot',
                  figure = {
                      'data' : [
                          {'x':df[df['date1']==input_value].message1, 'y':df[df['date1']==input_value].count1, 'type':'bar', 'name':'First Chart'}
                          ]
                      })

app.run_server(port=4050)

this works for me

Upvotes: 0

Amin Khodamoradi
Amin Khodamoradi

Reputation: 414

Here is a code that works for you.

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output



app = dash.Dash()
df = pd.DataFrame({'message': ['Hi', 'Bye', 'GN', 'Hi', 'Bye', 'GN'],
                   'Date': ['01/08/19', '01/08/19', '01/08/19', '02/08/19', '02/08/19', '02/08/19'],
                   'Count': [10, 20, 30, 15, 25, 35]})
app.layout = html.Div([

    dcc.Dropdown(
        id = 'first_dropdown',
        options = df.Date,
        placeholder='Select a Date'
    ),
    html.Div(id='output-graph')

    ])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='first_dropdown', component_property='options')]
    )

def update_output_div(input_value):
    return dcc.Graph(id = 'Bar_Plor',
                  figure = {
                      'data' : [
                          {'x':df.message, 'y':df.Count, 'type':'bar', 'name':'First Chart'}
                          ]
                      })


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

Upvotes: 1

Related Questions