Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

ValueError: ('Lengths must match to compare', (1379,), (1,))

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)

Hi dogbural, and wellcome to the Dash Community.
Based in your error message, it seams that the error is a Pandas error, see this:

In this link:

Some tips for facilitating a better understanding of the problem and getting more answers:
. For showing codes use the option in the pannel to insert it:
Image
. Try not to include files or data that others con’t access like: eg. df1 = pd.read_excel(“Scrap_Rework.xlsx”, ‘Scrap_Data’), in order to allow copy and paste of the code to analyze the issue.

Hope you can solve the problem and enjoy Dash :smiley:

1 Like