Search code examples
pythonplotlyplotly-dash

Visualise Multiple lines in plotly express plot

I am currently experimenting with plotly expess graphs to plot multiple sensor measurements. I have a csv data set which I read with pandas looking a like this (df_full_data):

data example

The data is used within a call back graph where two dropdown fields are used as input to define the year (year_value) and which sensors (hoved) should be shown in the graph.

year_data = df_full_data[df_full_data.years == int(year_value)]
filtered_sensor = year_data[year_data['ID'].isin(hoved)]

I use then px.line to plot the data.

figure = px.line(filtered_sensor, x=filtered_sensor['time'], y=filtered_sensor['water_m'], color=filtered_sensor['ID'], title='Sensor Meting')

everything is working fine when one sensorID is selected, but when I select two sensors the data will be shown behind each other. Meaning that first Sensor 58 data will be shown from 01/01/2019 till 31/12/2010, and the x axis will then start again from 01/01/2019 and plot the data of sensor 64.

plot result with two data sets.

I would like to plot the two graphs above each other/ on top of each other, and I guess this has something to do with how I sort or structure my panda table and how plotly will represent it, but I have no Idea how to accomplish this. Any idea or tips how to change it so the data will be represented above each other like this:

correct graph example

Tried I have tried to add traces for each sensor with:

fig = go.Figure()
for subset_id, subset in year_data.groupby('ID'):
    fig.add_trace(
        px.line(
            subset,
            x=subset['time'],
            y=subset['water_m'],
            color=subset['ID'],
            title=subset_id
        ).data[0]
    )

But it still gives me the same behaviour that the sensors are plotted in serie and not parallel to each other. enter image description here

Solution

  • Let's say you have a dataframe df, with columns: 'id', 'time','air_Pa', 'water_m' and 'year', representing times and pressures from some process, with a serial row index. Your 'time' format is day first, so that a pandas dataframe and plotly graph will see it as a series of strings, not as a time series, and that's why plots from different sensors do not superpose. That's probably why you also need a 'year' column, otherwise you shoud be able to using 'time' to slice yearly data. Just try to convert dayfirst datetime column into a valid pandas timestamp:

    df.time = pandas.to_datetime(df.time,dayfirst = True)

    Moreover, you can also read from csv already parsing dates dayfirst...

    df = pd.read_csv('df.csv', dayfirst=True, parse_dates=True)

    ... and now your plots won't superpose.