How to get dash app plotly to display data by year

Question

I'm new to dash and trying to get it to display a pie chart based on audit years that will display the amount of money 'Collected', 'Uncollected', 'Decreased', 'Written off'. Here's an example of what the pie charts look when i've coded them using plotly and not the dash feature.. So here is how it looks now via the dash app

Below is the code I used to make the dashboard

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

df1=pd.read_csv('Data 4.0.csv')

app=dash.Dash(__name__)

app.layout=html.Div([
    html.Div([
    html.Label(['Audit Yield']),
    dcc.Dropdown(
        id='my_dropdown',
        options=[
            {'label':'Year','value':'Yield Year'},
            {'label':'Status','value':'Status'},
            {'label':'Amount','value':'Amount'}
        ],
        value='Amount',
        multi=False,
        clearable=False,
        style={"width":"50%"}
    )
]),

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

])

@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    [Input(component_id='my_dropdown', component_property='value')]

)

def update_graph(my_dropdown):
    dff=df1
    
    piechart=px.pie(
            data_frame=dff,
            names=my_dropdown,
            hole=.3,
            )
    return(piechart)

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

So essentially I would like the dashboard to be called by year and show the amount collected for that year and where the money went. Just like how 7 pie charts show that data per year. Any help or direction would be greatly appreciated it.Thanks!

Here is a link to the dataset: Dataset for this code

Answer 1

So if I understood correctly, you want to select the year in the dropdown menu and show the corresponding pie chart?

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

df1 = pd.read_csv('Data 4.0.csv')
years = df1['Yield Year'].unique()

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        html.Label(['Audit Yield']),
        dcc.Dropdown(
            id='my_dropdown',
            options=[{'label': y, 'value': y} for y in years],
            value=years[0],
            multi=False,
            clearable=False,
            style={"width": "50%"}
        )
    ]),

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

])


@app.callback(
    Output(component_id='the_graph', component_property='figure'),
    [Input(component_id='my_dropdown', component_property='value')]
)
def update_graph(year):
    piechart = px.pie(
        df1[df1['Yield Year'] == int(year)],
        values='Amount',
        names='Status',
        hole=.3,
    )
    return piechart


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

Output: