Plotly dash ,dcc.dropdown(.....,multi=True)

📊 Plotly Python
1

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

import pandas as pd
import plotly.graph_objects as go

from sqlalchemy import create_engine

con = create_engine(“postgres://dlsfjcjacnegjt:30c9415457a0d226f949f9b0f1c535ce510de79400e25ec72658c38afcd86fb8@ec2-54-170-100-209.eu-west-1.compute.amazonaws.com:5432/db59voa7hm2hqd”)

query = “select date,value,parameter,year from dashboard_test_tbl ;”
data = pd.read_sql(query, con)
data[‘date’] = pd.to_datetime(data[‘date’],format=’%m/%d/%y’)

data[‘value’] = data[‘value’].astype(‘float’)
data[‘year’] = data[‘year’].astype(‘int’)
data.head()

mov_avg = [2,3,4,5,6,7,8,9,10]

app = dash.Dash(name , external_stylesheets = [dbc.themes.FLATLY])
server = app.server

Screenshot (461)
Screenshot (461)1920×1080 138 KB

controls = dbc.Card(
[
dbc.CardHeader(" "),
dbc.FormGroup(
[
dbc.Label(“Timeline of the Graph:”),
dcc.DatePickerRange(id = ‘date-picker’,
start_date_placeholder_text = “Start Date”,
end_date_placeholder_text = “End Date”,
start_date = data[‘date’].iloc[0],
end_date = data[‘date’].iloc[-1],
clearable=True,
initial_visible_month= data[‘date’].iloc[0],
),
]
),
dbc.FormGroup(
[
dbc.Label(“Select Parameter:”),
dcc.Dropdown(id = ‘select_parameter’,
multi = False,
clearable = True,
disabled = False,
style = {‘display’: True},
placeholder = ‘Select parameter’,
options = [{‘label’: i, ‘value’: i} for i in data[‘parameter’].unique()]
),
]
),
dbc.FormGroup(
[
dbc.Label(“Moving Average:”),
dcc.Dropdown(id = ‘avg_value’,
multi = False,
clearable = True,
disabled = False,
style = {‘display’: True},
placeholder = ‘Select No of days’,
options = [{‘label’: i, ‘value’: i} for i in mov_avg]
),
]
),
],
color=“dark”,outline=True,
body=True
)

In:

app.layout = dbc.Container(
[
html.Div(
[
html.Img(
src=app.get_asset_url(“dash-logo.png”),
id=“plotly-image”,
style={
“height”: “60px”,
“width”: “auto”,
“margin-bottom”: “25px”,
},
)
],
),
html.Div(" ",style={‘padding’: 15}),
html.H2(“Seismic Activity”),
html.Hr(),
dbc.Row(
[
dbc.Col(controls, md=3),
dbc.Col(dcc.Graph(id = ‘line Graph’), md=9),
],
align=“center”,
),
],
fluid=True,
)

@app.callback(Output(‘line Graph’, ‘figure’),
[Input(‘date-picker’ , ‘start_date’),
Input(‘date-picker’ , ‘end_date’),
Input(‘select_parameter’, ‘value’),
Input(‘avg_value’, ‘value’)])

def update_graph(start_date , end_date , select_parameter,avg_value):

data2 = data[((data['date'] > start_date) & (data['date'] < end_date)) & (data['parameter'] == select_parameter)]

trace_1 = go.Scatter(x = data2['date'] , y = data2['value'] , line_color = "#461B7E",showlegend=True,name='Values')

data2['rolling_mean'] = data2['value'].rolling(window=avg_value).mean()

trace_2 = go.Scatter(x = data2['date'] , y = data2['rolling_mean'] , line_color = "#00CED1",showlegend=True,
                     name='Average')

figure = go.Figure(data = [trace_1,trace_2])
                   
figure.update_xaxes(ticklabelmode = "period", rangeslider_visible = True , autorange = True)

figure.update_layout(template = 'ggplot2', title="Data of "+select_parameter)

return figure

if name == ‘main’:
app.run_server(debug = False)

Now i have to change the dcc.dropdown() of select_parameters to be Multi .
Everything else remains the same .
Need assistance!