Plotly Dash : Time Series Scatter plot rendering

Question

I'm following the dash wind streaming example to stream data from a MySQL database. Data is added to the database every 5 seconds and queried respectively. I used the Interval component to query and a hidden div to store. I read the jsonified data in a callback function into a dataframe called df.

I generate a trace using the following:

trace_sensor_1 = Scatter(
    x=df.loc[df['sensor_id'] == 1]['timestamp'],
    y=df.loc[df['sensor_id'] == 1]['sensor_reading'],
    mode='markers+lines',
    name='Sensor 1',

However, the scatter plot that this generates (attached) jumps all over the place. Is this due to the mode I'm using? How do I modify the trace to render a proper looking time series scatter?

Answer 1

For plotly its important to sort your data by your x axis first.

In pandas you can sort like this:

df_sorted = df.sort_values(by=['timestamp'])