I am making an interactive dashboard using Plotly Dash and other libraries for Python. Among other things, my Dashboard will also have a simple line plot of the data shown below, which will update when the user changes the timestamp range.
I managed to create a DateRangePicker and then update the figure accordingly to the date range the user selects, but I see no option for Time range or timestamp range - even searching in the Dash documentation and on Plotly-Dash community forums, so I was wondering if it's somehow possible to do this in Dash? I would like to have a timestamp range "from [Timestamp]" - "to [Timestamp]" instead of the Date picker.
This is a snippet of my dataset:
timestamp date id lat lon mode temperature
0 2022-04-01 13:48:38 2022-04-01 15 52.5170365 13.3888599 AUTO 33
1 2022-04-01 13:48:40 2022-04-01 15 52.5170365 13.3888599 AUTO 33
2 2022-04-01 13:48:42 2022-04-01 15 52.5170365 13.3888599 AUTO 33
3 2022-04-02 13:49:18 2022-04-02 15 52.5170375 13.3888605 AUTO 30
4 2022-04-02 13:49:34 2022-04-02 15 52.5170375 13.3888605 AUTO 30
5 2022-04-02 13:49:52 2022-04-02 15 52.5170375 13.3888605 AUTO 30
6 2022-04-03 13:50:10 2022-04-03 15 52.5170385 13.3888609 AUTO 31
7 2022-04-03 13:50:46 2022-04-03 15 52.5170385 13.3888609 AUTO 31
8 2022-04-04 13:51:24 2022-04-04 15 52.5170395 13.3888614 AUTO 34
9 2022-04-04 13:51:46 2022-04-04 15 52.5170395 13.3888614 AUTO 34
This is the example code I wrote for the date picker (and it works):
import pandas as pd
from datetime import datetime as dt
from datetime import date
import dash
import dash_daq as daq
from dash import dcc, html, Input, Output, State
import dash_bootstrap_components as dbc
from jupyter_dash import JupyterDash
import plotly.express as px
import plotly.graph_objects as go
#df = #data shown above
app = JupyterDash(__name__)
app.layout = html.Div(
[
dcc.DatePickerRange(
id="date_filter",
initial_visible_month=dt(dt.today().year, 8, 1).date(),
start_date=df['date'].min(),
end_date=df['date'].max(),
show_outside_days=True,
day_size=32,
display_format='DD/MM/YYYY',
clearable=True,
style={'text-align':'left', 'width': '6', 'font-size': '10'}
),
dcc.Graph(id="graph"),
]
)
@app.callback(
Output("graph", "figure"),
Input("date_filter", "start_date"),
Input("date_filter", "end_date"),
)
def updateGraph(start_date, end_date):
if not start_date or not end_date:
raise dash.exceptions.PreventUpdate
else:
return px.line(
df.loc[
df["date"].between(
pd.to_datetime(start_date), pd.to_datetime(end_date)
)
],
x="date",
y="temperature",
)
# Run app and display result inline in the notebook
app.run_server(mode="inline")
I have done it with dropdowns in the past. If you need hour and minutes just divide them into 2 dropdowns and it gets quite easy to operate with them.