pythonplotlyplotly-dashplotly-python
Showing graphs Two dropdown that can choose multiple
I'm new in plotly and dash. I'm trying to make two dropdown menu that can choose multiple options. When I choose 1 and 2 on first dropdown menu and choose 2 and 3 on second dropdown menu, my expectation is showing line graphs(1-2,1-3,2-2,2-3) Here is my expectation.
Example for Expectation dropdown menu
Here is my code for not able to select multi dropdown menu
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("data/testTemp02.csv")
data["Time"] = pd.to_datetime(data["Time"], format="%H:%M:%S").dt.time
data.sort_values("Time", inplace=True)
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.Div(
children=[
html.H1(
children="TempMon Analytics",
className="header_title",
),
html.P(
children="Testing TempMon Analytics",
className="header_description",
),
],
className="header",
),
html.Div(
children=[
html.Div(
children=[
html.Div(
children="Slot",
className="menu-title"),
dcc.Dropdown(
id="slot-filter",
options=[
{"label": Slot, "value": Slot}
for Slot in np.sort(data.Slot.unique())
],
value="Select Slot(s)",
clearable=False,
className="dropdown",
),
],
),
html.Div(
children=[
html.Div(
children="Dut",
className="menu-title"),
dcc.Dropdown(
id="dut-filter",
options=[
{"label": Dut, "value": Dut}
for Dut in data.Dut.unique()
],
value="Select Dut(s)",
clearable=False,
searchable=False,
#multi=True,
className="dropdown",
),
],
),
],
className="menu",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="dut-chart",
config={"displayModeBar": True},
),
className="card",
),
],
className="wrapper",
),
]
)
@app.callback(
Output("dut-chart", "figure"),
[
Input("slot-filter", "value"),
Input("dut-filter", "value"),
],
)
def update_charts(Slot, Dut):
mask = (
(data.Slot == Slot)
& (data.Dut == Dut)
)
filtered_data = data.loc[mask, :]
dut_chart_figure = {
"data": [
{
"x": filtered_data["Time"],
"y": filtered_data["DutTemp"],
"type": "lines",
},
],
"layout": {
"title": {
"text": "Dut temp(°C)",
},
"colorway": ["#E12D39"],
},
}
return dut_chart_figure
if __name__ == "__main__":
app.run_server(debug=True)
and Here is my data named testTemp02.csv
Slot,Time,Dut,DutTemp
1,0:00:01,1,0
1,0:00:02,1,11
1,0:00:03,1,21
1,0:00:04,1,24
1,0:00:05,1,27
1,0:00:06,1,40
1,0:00:07,1,42
1,0:00:08,1,45
1,0:00:09,1,60
1,0:00:10,1,90
1,0:00:01,2,0
1,0:00:02,2,15
1,0:00:03,2,23
1,0:00:04,2,17
1,0:00:05,2,27
1,0:00:06,2,33
1,0:00:07,2,42
1,0:00:08,2,48
1,0:00:09,2,69
1,0:00:10,2,88
1,0:00:01,3,0
1,0:00:02,3,25
1,0:00:03,3,10
1,0:00:04,3,28
1,0:00:05,3,38
1,0:00:06,3,45
1,0:00:07,3,37
1,0:00:08,3,49
1,0:00:09,3,66
1,0:00:10,3,92
2,0:00:01,1,10
2,0:00:02,1,10
2,0:00:03,1,10
2,0:00:04,1,10
2,0:00:05,1,10
2,0:00:06,1,10
2,0:00:07,1,10
2,0:00:08,1,10
2,0:00:09,1,10
2,0:00:10,1,10
2,0:00:01,2,0
2,0:00:02,2,25
2,0:00:03,2,60
2,0:00:04,2,30
2,0:00:05,2,49
2,0:00:06,2,36
2,0:00:07,2,23
2,0:00:08,2,6
2,0:00:09,2,100
2,0:00:10,2,25
2,0:00:01,3,9
2,0:00:02,3,48
2,0:00:03,3,29
2,0:00:04,3,48
2,0:00:05,3,9
2,0:00:06,3,29
2,0:00:07,3,129
2,0:00:08,3,34
2,0:00:09,3,23
2,0:00:10,3,57
Here is my current Showing one graphs with choosing two dropdown
Solution
In this case, if the two conditions allow multiple drop-down selections, the graph must be created even if there are single and multiple selections. The data frames extracted from the values of each dropdown are created. The graph cannot be created as is. Extract from the value of the direct product of the two conditions from the value of the selected dropdown, for the data frame. I am not sure if this method is best practice.
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
from itertools import product
import plotly.graph_objects as go
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.Div(
children=[
html.H1(
children="TempMon Analytics",
className="header_title",
),
html.P(
children="Testing TempMon Analytics",
className="header_description",
),
],
className="header",
),
html.Div(
children=[
html.Div(
children=[
html.Div(
children="Slot",
className="menu-title"),
dcc.Dropdown(
id="slot-filter",
options=[
{"label": Slot, "value": Slot}
for Slot in np.sort(data.Slot.unique())
],
multi=True,
value=["Select Slot(s)"],
clearable=False,
className="dropdown",
),
],
),
html.Div(
children=[
html.Div(
children="Dut",
className="menu-title"),
dcc.Dropdown(
id="dut-filter",
options=[
{"label": Dut, "value": Dut}
for Dut in data.Dut.unique()
],
value=["Select Dut(s)"],
clearable=False,
searchable=False,
multi=True,
className="dropdown",
),
],
),
],
className="menu",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="dut-chart",
config={"displayModeBar": True},
),
className="card",
),
],
className="wrapper",
),
]
)
@app.callback(
Output("dut-chart", "figure"),
[
Input("slot-filter", "value"),
Input("dut-filter", "value"),
],
)
def update_charts(Slot, Dut):
mask = (
(data.Slot.isin(Slot))
& (data.Dut.isin(Dut))
)
filtered_data = data.loc[mask, :]
conditions = product(Slot, Dut)
fig = go.Figure()
for v in conditions:
# print('Slot', v[0], 'Dut', v[1])
df = filtered_data[(filtered_data['Slot'] == v[0]) & (filtered_data['Dut'] == v[1])]
fig.add_trace(go.Scatter(
x=df['Time'],
y=df['DutTemp'],
name='Slot:{} Dut:{}'.format(v[0],v[1])
))
fig.update_layout(title="Dut temp(°C)")
return fig
if __name__ == "__main__":
app.run_server(debug=True)
- Python method chaining in functional programming style
- flask-jwt-extended: Fake Authorization Header during testing (pytest)
- For loop through the list unless empty?
- Polars make all groups the same size
- Is there a way to specify a default base-template for all templates in django?
- How to tackle time limit exceeded error in leetcode
- Is pd.get_dummies() updated in newer versions of Pandas making it default to Booleans (True/False) instead of (0/1)?
- What's the function like sum() but for multiplication? product()?
- How to type hint a dynamically-created dataclass
- Issue with pulling the data with EIA API with Python
- 403 Forbidden Error when scraping a site, user-agents already used and updated. Any ideas?
- Fullstack web-hosting services
- How to handle an AnalysisException on Spark SQL?
- Python requests is slow and takes very long to complete HTTP or HTTPS request
- Is there a way to modify an element in a Numpy array based on the value of other elements?
- Tkinter grid manager height/width nonconsistent
- Sql Alchemy Insert Statement failing to insert, but no error
- How can I create a Polars struct while eval-ing a list?
- Excel using win32com and python
- django: on pypy, psyco, unladen swallow or cpython, which one is the fastest?
- How convert a list into multiple columns and a dataframe?
- Name not defined in type annotation
- Static type checkers and Language Servers not recognizing attributes of objects that are subclasses
- How do I get multiple OID values in PySNMP?
- how to log a file in Django
- Is there a simple and efficient way to evaluate Elementary Symmetric Polynomials in Python?
- Iterating over two lists one after another
- Python -i flag for production
- What is PyCompilerFlags in Python C API?
- How to make Python check whether a variable is a number or letter