I'm trying to prepare a sample dashboard in Dash. I have a problem with dates on X axis, which are not overlapping the values and the second graph is being added at the end of the first, instead on top of it. The easiest way to explain it is by this picture:
import dash
from dash import html
from dash import dcc
from dash.dependencies import Input, Output
import pandas as pd
import plotly.graph_objects as go
df = pd.read_excel('data/FZAI2.xlsx')
pd.to_datetime(df['Collect Time'], format='%Y/%m/%d %H:%M')
app = dash.Dash()
app.layout = html.Div(
[
dcc.Graph(
id='temp1',
figure={
'data':[
go.Line(
x=df['Collect Time'][df['Device Name'] == 'Temp 1'],
y=df['Value'][df['Device Name'] == 'Temp 1']
),
go.Line(
x=df['Collect Time'][df['Device Name'] == 'Temp 2'],
y=df['Value'][df['Device Name'] == 'Temp 2']
)
]
}
)
]
)
I have tried also to sort the data by adding
df = df.sort_values(['Collect Time']).reset_index(drop=True)
and
df.sort_values(['Collect Time'], inplace=True)
but none of them did anything to the graph.
Also, mentioning my dataset - it is an excel file with over 10.000 rows, following similar style as below:
| Device Name | Value | Measurement Type | Collect time |
|---|---|---|---|
| RH 1 | 60 | Humidity | 2021/12/30 23:40 |
| Temp 1 | 25.1 | Temperature | 2021/12/30 23:40 |
| Temp 2 | 26.6 | Temperature | 2021/12/30 23:03 |
| RH 1 | 60 | Humidity | 2021/12/30 22:40 |
| Temp 1 | 25.2 | Temperature | 2021/12/30 22:40 |
In addition, the Collect Time is often taking measures in different time schedule, therefore sometimes Temp 1 might be taken at 20:00, 20:10, 20:15, while Temp 2 at 20:03, 20:10, 20:16. It would be ideal, if I could put them together on the same graph despite Collect time being not the same for both values. I was considering to average the times to nearest 10 minutes, but I'm open for suggestions.
