Problème de graphiques Dash

Signaler
-
 naz113 -
Bonjour, je suis débutant en Dash et je souhaite créer un tableau de bord avec un fichier personnel.
Je me suis inspiré de ce tuto pour réaliser un dashboard personnel : https://realpython.com/python-dash/#:~:text=%20Develop%20Data%20Visualization%20Interfaces%20in%20Python%20With,Apps%20Using%20Callbacks.%20In%20this%20section%2C...%20More%20 .
J'ai réalisé quelques modifications sur les onglets interactifs et sur les valeurs, mais j'ai toujours 2 graphiques avec le 1er code.
Le 2ème code est le même mais simplement avec les éléments concernant le 2ème graphique (en gras et souligné) supprimé.
Malheureusement, je reçois ce message d'erreur sur l'IDE :
C:\Users\...\AppData\Roaming\Python\Python38\site-packages\pandas\core\ops\array_ops.py:253: FutureWarning: elementwise comparison failed; returning scalar instead, but in the future will perform elementwise comparison
res_values = method(rvalues)


Et celui-ci sur le tableau de bord :
Callback error updating price-chart.figure

dash.exceptions.InvalidCallbackReturnValue: The callback ..price-chart.figure.. is a multi-output.
Expected the output type to be a list or tuple but got:
{'data': [{'x': Series([], Name: date, dtype: datetime64[ns]), 'y': Series([], Name: valeur, dtype: float64), 'type': 'lines', 'hovertemplate': '$%{y:.2f}<extra></extra>'}], 'layout': {'title': {'text': 'Average Price of Avocados', 'x': 0.05, 'xanchor': 'left'}, 'xaxis': {'fixedrange': True}, 'yaxis': {'tickprefix': '$', 'fixedrange': True}, 'colorway': ['#17B897']}}.


Je pense que le problème est tout simple mais j'ai du mal à le percevoir. Je vous laisse les 2 scripts (avec les 2 graphiques, qui fonctionne bien, puis un seul graphique, mais qui ne fonctionne pas).
Merci beaucoup !

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
from dash.dependencies import Output, Input

data = pd.read_csv("C:/Users/.../Mesures.csv")
data["date"] = pd.to_datetime(data["date"], format="%Y-%m-%d")
data.sort_values("date", inplace=True)

app = dash.Dash(__name__)
app.title = "Avocado Analytics: Understand Your Avocados!"

app.layout = html.Div(
children=[
html.Div(
children=[
html.Div(
children=[
html.Div(children="Region", className="menu-title"),
dcc.Dropdown(
id="region-filter",
options=[
{"label": id_station, "value": id_station}
for id_station in np.sort(data.id_station.unique())
],
value="Sélectionnez une station",
clearable=False,
className="dropdown",
),
]
),
html.Div(
children=[
html.Div(
children="Date Range",
className="menu-title"
),
dcc.DatePickerRange(
id="date-range",
min_date_allowed=data.date.min().date(),
max_date_allowed=data.date.max().date(),
start_date=data.date.min().date(),
end_date=data.date.max().date(),
),
]
),
],
className="menu",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart", config={"displayModeBar": False},
),
className="card",
),
html.Div(
children=dcc.Graph(
id="volume-chart", config={"displayModeBar": False},
),
className="card",
),

],
className="wrapper",
),
]
)

@app.callback(
[Output("price-chart", "figure"), Output("volume-chart", "figure")],
[
Input("region-filter", "value"),
Input("date-range", "start_date"),
Input("date-range", "end_date"),
],
)
def update_charts(id_station, start_date, end_date):
mask = (
(data.id_station == id_station)
& (data.date >= start_date)
& (data.date <= end_date)
)
filtered_data = data.loc[mask, :]
price_chart_figure = {
"data": [
{
"x": filtered_data["date"],
"y": filtered_data["valeur"],
"type": "lines",
"hovertemplate": "$%{y:.2f}<extra></extra>",
},
],
"layout": {
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {"tickprefix": "$", "fixedrange": True},
"colorway": ["#17B897"],
},
}

volume_chart_figure = {
"data": [
{
"x": filtered_data["date"],
"y": filtered_data["valeur"],
"type": "lines",
},
],
"layout": {
"title": {"text": "Avocados Sold", "x": 0.05, "xanchor": "left"},
"xaxis": {"fixedrange": True},
"yaxis": {"fixedrange": True},
"colorway": ["#E12D39"],
},
}

return price_chart_figure, volume_chart_figure


if __name__ == "__main__":
app.run_server(debug=True)


import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import numpy as np
from dash.dependencies import Output, Input

data = pd.read_csv("C:/Users/.../Mesures_quotidiennes.csv")
data["date"] = pd.to_datetime(data["date"], format="%Y-%m-%d")
data.sort_values("date", inplace=True)

app = dash.Dash(__name__)
app.title = "Avocado Analytics: Understand Your Avocados!"

app.layout = html.Div(
children=[
html.Div(
children=[
html.Div(
children=[
html.Div(children="Region", className="menu-title"),
dcc.Dropdown(
id="region-filter",
options=[
{"label": id_station, "value": id_station}
for id_station in np.sort(data.id_station.unique())
],
value="Sélectionnez une station",
clearable=False,
className="dropdown",
),
]
),
html.Div(
children=[
html.Div(
children="Date Range",
className="menu-title"
),
dcc.DatePickerRange(
id="date-range",
min_date_allowed=data.date.min().date(),
max_date_allowed=data.date.max().date(),
start_date=data.date.min().date(),
end_date=data.date.max().date(),
),
]
),
],
className="menu",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart", config={"displayModeBar": False},
),
className="card",
)
],
className="wrapper",
),
]
)

@app.callback(
[Output("price-chart", "figure")],
[
Input("region-filter", "value"),
Input("date-range", "start_date"),
Input("date-range", "end_date"),
],
)
def update_charts(id_station, start_date, end_date):
mask = (
(data.id_station == id_station)
& (data.date >= start_date)
& (data.date <= end_date)
)
filtered_data = data.loc[mask, :]
price_chart_figure = {
"data": [
{
"x": filtered_data["date"],
"y": filtered_data["valeur"],
"type": "lines",
"hovertemplate": "$%{y:.2f}<extra></extra>",
},
],
"layout": {
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {"tickprefix": "$", "fixedrange": True},
"colorway": ["#17B897"],
},
}

return price_chart_figure


if __name__ == "__main__":
app.run_server(debug=True)



Configuration: Windows / Chrome 90.0.4430.212

2 réponses

D'après ce que je comprends de l'erreur (c'est peut-être pas ça), pas envie de lire le tuto.

D'un côté tu as au moins 2 valeurs, qui si je le comprends est nécessaire au fonctionnement du truc :
[Output("price-chart", "figure"), Output("volume-chart", "figure")]


Et de l'autre tu n'en a plus qu'une, et là, il n'est pas content, parce que tu lui donnes des choux, mais pas de carottes pour qu'il puisse faire sa tambouille.

Maintenant comment lui rajouter les livres de carottes, c'est à toi de voir ^^
Bonjour, merci pour votre réponse.
De ce que je comprends, le Output("volume-chart", "figure") correspond au graphique volume-chart, c'est pour cela que je l'ai supprimé ainsi que tout ce qui faisait référence au "volume-chart", mais je possède toujours cette erreur.