i want to add area chart to every scatter chart in my dash app. some conexte about dash app: it has 2 section: first section for data input from different users . Second part is to plot previously paramaters typed by users in scatter plots. So user select partamters to visualize and then for every paramter a scttaer plot is displayed. I have a fixed paramter that i want to always display on every scatter plot as an area chart.
I’m using this function :
def update_visualization(selected_product, selected_params):
if selected_product and selected_params:
filename = f"{selected_product}_data.csv"
if os.path.exists(filename):
df = pd.read_csv(filename)
df['timestamp'] = pd.to_datetime(df['timestamp'])
# Filter the data based on selected parameters
filtered_df = df[df['parameter'].isin(selected_params)]
fig=make_subplots(rows=len(selected_params), cols=1, subplot_titles=[f"Evolution of {param}" for param in selected_params])
color_dict={"User1":"red","User2":"blue","User3":"green"}
#for user, color in color_dict.items():
# Create a figure with subplots for each parameter selected
#fig = go.Figure()
h_data=df[df['parameter'] == 'H'] # filter H data
print("h DATA HERE", h_data)
for i, param in enumerate(selected_params, start=1):
param_data = filtered_df[filtered_df['parameter'] == param]
#fig = make_subplots(specs=[[{"secondary_y": True}]])
for user, color in color_dict.items():
#fig = make_subplots(specs=[[{"secondary_y": True}]])
user_data = param_data[param_data["user_id"]== user]
colors = np.random.rand(1,255)
fig.add_trace(
go.Scatter(
x=user_data['timestamp'],
y=user_data['value'],
mode='markers',
name=f"{param} - {user}",
marker= dict(color=f"rgb({(hash(user) % 255)}, {(hash(user) // 255) % 255}, {(hash(user) // 255 // 255) % 255})"),#dict(color =color_dict),
#color=user_data['value'],
text=user_data["user_id"],
hovertemplate="Utilisateur: %{text}<br>Valeur: %{y}<br>Date: %{x}",
#template="plotly_white",
# - User {user}",#param,
),
secondary_y=False,
row=i , col=1
),
#add area chart of h_data values
fig.add_trace(
go.Scatter(
x=h_data['timestamp'],
y=h_data['value'],
name="2eme axe",
fill="tonexty",
),
secondary_y=True,
row=i , col=1
),
# Add USL and LSL lines if available
if not param_data["USL"].isna().all():
fig.add_hline(y=param_data["USL"].dropna().iloc[0], line_dash="dash", line_color="red", row=i, col=1, annotation_text="USL")
if not param_data["LSL"].isna().all():
fig.add_hline(y=param_data["LSL"].dropna().iloc[0], line_dash="dash", line_color="blue", row=i, col=1, annotation_text="LSL")
fig.update_layout(height=300 * len(selected_params))
fig.update_layout(plot_bgcolor="white")
#fig.update_layout(paper_bgcolor="black")
return dcc.Graph(figure=fig)
expected final result is :
in blue is area chart (H_data here) that i want to plot in my app. green , pink data points are typical paramters i want to scatter plot (1 scatter plot per paramter + area chart)
any help with this ?