Drop down and graphs problem in dash

Dash Python
1

I am giving the output from dropdown
And i have two divs in one div there is one graph and in second div there are two graphs and for one dropdown value i am showing one graph and for second value i am showing two graphs but now problem is when i choose second value after choosing first value, it is showing first div graph in second div graph also, please help me to solve this problem

2

Hi @Raghav_Mahajan welcome to the forums.

Could you add your code? Otherwise it’ll be difficult to help you.

3 
import os
import dash
import pandas as pd
import plotly.express as px
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Output, Input

from dash.exceptions import PreventUpdate

df = pd.read_csv("C:\Projects\Dashboard\data.csv")
Totaltestdata = df.TestResult.unique()
Totaltestcount = df.Count.unique()

Testsuitedata = df.TestSuite.unique()
Testsuitecount = df.SuiteCount.unique()
print("Printing category column")
print(df.Category.unique())
# visual = px.pie(data_frame=df, names=data, values=dat)
# visual.show()
TestResultToday = px.bar(data_frame=df, x='TodayTestResult', y=['Pass', 'Fail'])
TestResult = px.pie(data_frame=df, names=Totaltestdata, values=Totaltestcount)
TestSuite = px.pie(data_frame=df, names=Testsuitedata, values=Testsuitecount)
app = dash.Dash(__name__)
app.layout = html.Div([
    html.Div([
        html.H1("My First Dashboard",style={'text-align': 'center'}),
        dcc.Dropdown(id='Category',
                     options=[{'label': x, 'value': x}
                              for x in sorted(df.Category.unique())],
                     value='Jira',searchable=False,clearable=False),
        dcc.Graph(id='TestResultToday',figure={},style={"width": "40%","height":"50"} ),
    ]),
    html.Div([
        dcc.Graph(id='DashBoard1',figure={},style={"width": "40%","height":"50",'display': 'inline-block'}),
        dcc.Graph(id='DashBoard2',figure={},style={"width": "40%","height":"50",'display': 'inline-block'})
    ])
])



@app.callback(
    Output(component_id='TestResultToday', component_property='figure'),
    Input(component_id='Category', component_property='value')
)
def TestResultToday_graphs(Category):
    print("printing category returing from dropdown")
    print(Category)
    if (Category == 'TodayTestResult'):
        fig = TestResultToday
    else:
        raise PreventUpdate
    return fig


@app.callback(
    Output(component_id='DashBoard1', component_property='figure'),
    Input(component_id='Category', component_property='value')
)
def DashBoard1_graphs(Category):
    print("printing category returing from dropdown")
    print(Category)
    if (Category == 'DashBoard'):
        fig = TestResult
    else:
        raise PreventUpdate
    return fig

@app.callback(
    Output(component_id='DashBoard2', component_property='figure'),
    Input(component_id='Category', component_property='value')
)
def DashBoard2_graphs(Category):
    print("printing category returing from dropdown")
    print(Category)
    if (Category == 'DashBoard'):
        fig = TestSuite
    else:
        raise PreventUpdate
    return fig


if __name__ == '__main__':
    app.run(host=os.getenv("HOST", ""), port=os.getenv("PORT", "8051"))

endvalue
endvalue1920×859 32.8 KB

startvalue
startvalue1834×775 21.8 KB

4

Hi @AIMPED
please find above my code and if u see in start value screenshot i just select dash board which are showing two graphs which is expected but when i select second value which is todaytestresult still the old graphs are visible which is not expected i want that graphs should not appear

5

one more thing i observed is that all three callbacks function are executing when i select the value in drop down

6

This behaviour is correct as you have three callbacks which are getting triggered by the same property of the same component
Input(component_id='Category', component_property='value')

Could you explain what is the intended behaviour? Do you want the other charts to get deleted depending on the selection and see only one chart?

7

@AIMPED yes correct i want to show only specific chart at a time and also if u see if didn’t selected anything then by default empty charts are reflecting which also i don’t want eg as below

image
image1698×647 4.04 KB

8

In this case try substituting

raise PreventUpdate

with

fig={}

in all of your callbacks.

You actually do not want to prevent the update, but update the graph to have an empty figure.

9

Thanks @AIMPED for help , but i got one alternate solution

1 Like
10

Perfect, glad you figured it out!

1 Like