Add scroll bar to x axis to show only n most recent points

plotly.js
1

I have a basic plot, which I am updating with time series data every second. I would like to have it after lets say 500 points show a scroll bar to restrict the points shown whilst keeping the data there. What is the best way to go about this?

2

Hey, so I found this code by SentDex on youtube for one of my earlier projects and it works great! It drops the previous points except for those in the previous 100 values.

def df_resample_sizes(df, maxlen=MAX_DF_LENGTH):
    df_len = len(df)
    resample_amt = 100
    vol_df = df.copy()
    vol_df['volume'] = 1

    ms_span = (df.index[-1] - df.index[0]).seconds * 1000
    rs = int(ms_span / maxlen)

    df = df.resample('{}ms'.format(int(rs))).mean()
    df.dropna(inplace=True)

    vol_df = vol_df.resample('{}ms'.format(int(rs))).sum()
    vol_df.dropna(inplace=True)

    df = df.join(vol_df['volume'])

    return df

call this function in your function to update the real time graph, after the call back.

1 Like