Hi,
Im now learning python and below is what I have been trying to work out.
With basic bar chart, I would like to have another timeline bart chart where qty against years show for the hovered bart from the basic bar chart. I was looking an example (Part 4. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly). However, I could not make it right yet.
Can you please give me some advice to get it right?
import dash
import plotly.express as px
import pandas as pd
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input
df1 = pd.read_excel(“Scrap_Rework.xlsx”, ‘Scrap_Data’)
df2 = pd.read_excel(“Scrap_Rework.xlsx”, ‘Rework_Data’)
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash (name, external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div([
html.H1(“Scrap & Rework Summary”)]),
html.Div([
dcc.Dropdown (id='Cause-Selection', options=[{'label':x, 'value':x}
for x in sorted(df1.Cause.unique())],
value='Supplier', style={'width':'45%'}
),
dcc.Graph(id='my-graph-df1',hoverData={'points': [{'customdata': '22-000101'}]})
], style={'width':'45%','display': 'inline-block' }),
html.Div([
dcc.Dropdown(id='Location', options=[{'label': x, 'value': x}
for x in sorted(df2.Production.unique())],
value='P1', style={'width': '45%'}
),
dcc.Graph(id='my-graph-df2'),
], style={'width':'45%','display': 'inline-block' }),
html.Div([
dcc.Graph(id='Hover_Trend')
])
])
@app.callback(
Output(component_id=‘my-graph-df1’, component_property=‘figure’),
[Input(component_id=‘Cause-Selection’, component_property=‘value’)]
)
def interactive_df1(selected_cause):
filtered_df1 = df1[df1.Cause==selected_cause]
fig_df1 = px.bar(data_frame=filtered_df1, x=‘Quantity’, y=‘PDN’, hover_data=[‘Description’])
fig_df1.update_layout(yaxis={‘categoryorder’: ‘total ascending’})
return fig_df1
def Create_hoverdata_df1(dff):
fig_hov_df1 = px.bar(data_frame=dff, x=‘Date’, y=‘Quantity’)
return fig_hov_df1
@app.callback(
Output(component_id=‘my-graph-df2’, component_property=‘figure’),
[Input(component_id=‘Location’, component_property=‘value’)]
)
def interactive_df2(selected_location):
filtered_df2 = df2[df2.Production==selected_location]
fig_df2 = px.bar(data_frame=filtered_df2, x=‘Hours’, y=‘Cause’, hover_data=[‘Problem’])
fig_df2.update_layout(yaxis={‘categoryorder’: ‘total ascending’})
return fig_df2
@app.callback(
Output(component_id=‘Hover_Trend’, component_property= ‘figure’),
[Input(component_id=‘my-graph-df1’, component_property= ‘hoverData’)]
)
def hover_df1(hoverData):
Part_no = hoverData[‘points’][0][‘customdata’]
dff=df1[df1[‘PDN’]==Part_no]
return Create_hoverdata_df1 (dff)
if name == ‘main’:
app.run_server(debug=True)
