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
Hi @Raghav_Mahajan welcome to the forums.
Could you add your code? Otherwise it’ll be difficult to help you.
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"))
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
one more thing i observed is that all three callbacks function are executing when i select the value in drop down
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?
@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
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.
Perfect, glad you figured it out!
1 Like