5

I am using dash plotly in python. I am plotting real-time data which is being logged into an SQLite database, currently, I am plotting a single value vs timeline graph. I am planning to add 20 more graphs to this but currently, as time increases the plot gets slower I think it's due to the replotting of the entire plot again. so could anyone please let me know if there an efficient way to do this? I am new to dash-plotly so any help would be a great help to me.

Thank you.

import random
import dash
import plotly
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input

X = list()
X.append(0)
Y = list()
Y.append(0)
app = dash.Dash(__name__, suppress_callback_exceptions=True,)
app.layout = html.Div([html.Div([
    dcc.Graph(id='live-graph'),
    dcc.Interval(
        id='graph-update',
        interval=0.05 * 1000
    ),
])
])

latest_sno = 0


@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'n_intervals')])
def update_graph_scatter(input_data):
    X.append(X[-1]+1)
    Y.append(0+random.randint(-2,2))
    data = plotly.graph_objs.Scatter(
        x=X,
        y=Y,
        name='lines',
        mode='lines'
    )
    if (len(X)) > 1000:
        x_l = max(X) - 1000
    else:
        x_l = 0
    return {'data': [data], 'layout': go.Layout(title="BMS_01_CellVolt_AVG01",
                                                xaxis=dict(range=[x_l, max(X) + 1]),
                                                yaxis=dict(range=[min(Y) - 0.15, max(Y) + 1]),
                                                yaxis_title="Voltage in (V)",
                                                xaxis_title="TIME",
                                                )}
if __name__ == '__main__':
    app.run_server(debug=True,port = 5050)
rohith santosh
  • 28
  • 6
  • 23
  • 2
    Does this answer your question? [Plotly/Dash display real time data in smooth animation](https://stackoverflow.com/questions/63589249/plotly-dash-display-real-time-data-in-smooth-animation) – emher Jul 12 '21 at 08:27
  • 1
    hi, thanks for the reply, I went through the link but it was not helpful for me I am trying to eliminate the task of replotting the whole graph. If you see the code I am using 2 lists(X Y) to store data and from that, I am plotting the graph so as the time increases the plot gets laggy as I am replotting the whole graph again. is a there a way where I can only trace the latest points instead of all points. – rohith santosh Jul 12 '21 at 08:46
  • 3
    Yes, in the link I posted, it is demonstrated how to avoid redrawing the whole graph (which is what happens when you target the 'figure' property) by targeting the 'extendData' property. – emher Jul 12 '21 at 09:04
  • I am confused, from my understanding he is updating as a figure and leaving the previous values but in my case, I need to preserve the previous values on the graph also. can you help me out with this I am totally new to this? – rohith santosh Jul 12 '21 at 11:27
  • it will be really really helpful if you can help it with my code. – rohith santosh Jul 12 '21 at 11:35
  • 1
    You say you want someone to make the changes to your code, but your code requires local files to run. You might have better luck if you edit your code to be a [mre](https://stackoverflow.com/help/minimal-reproducible-example) that others can run without having to access your database. – 0x263A Jul 20 '21 at 20:13
  • I made required changes, hope it's possible right now to work with it. – rohith santosh Jul 21 '21 at 05:23

1 Answers1

1

ok After struggling for so many days I found a solution for my question. you can achieve it using extendable graphs follow this link to find the sample code https://community.plotly.com/t/extend-or-append-data-instead-of-update/8898/25

rohith santosh
  • 28
  • 6
  • 23