Real time/updating Plotly chart in Python/Flask app?

Question

I built a Webapp with Flask (with a JS frontend) and now i would like to add charts to show my data.

I managed to embed a chart on it but it's static, is there a way to make it dynamic (for example with random values so that i can later add my own data to it)?

def index():

    rng = pd.date_range('1/1/2011', periods=7500, freq='H')
    ts = pd.Series(np.random.randn(len(rng)), index=rng)

    graphs = [

        dict(
            data=[
                dict(
                    x= arr,
                    y=[10, 20, 30],
                    type='scatter'
                ),
            ],
            layout=dict(
                title='first graph'
            )
        ) 

    ]

    # Add "ids" to each of the graphs to pass up to the client
    # for templating
    ids = ['graph-{}'.format(i) for i, _ in enumerate(graphs)]

    # Convert the figures to JSON
    # PlotlyJSONEncoder appropriately converts pandas, datetime, etc
    # objects to their JSON equivalents
    graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)

    return render_template('index.html',
                           ids=ids,
                           graphJSON=graphJSON)

Have you seen plotly streaming? plot.ly/python/streaming-tutorial or Dash github.com/plotly/dash-wind-streaming/blob/master/README.md — OneCricketeer
– OneCricketeer, Commented Nov 13, 2018 at 15:18

Sebastian Loehner · Accepted Answer · 2018-11-13 15:13:33Z

1

HTTP is stateless by nature, so if you want dynamic, you will have to do that in the frontend.

Without knowing more about your Frontend I cannot give concrete examples, but hopefully this puts you on the right track:

Update the chart data in constant intervals through AJAX calls to the backend.
With that extended data update the chart through Plotly.extendtraces

answered Nov 13, 2018 at 15:13

Sebastian Loehner

1,3127 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack022 Over a year ago

Thanks! I'll look into it!

Collectives™ on Stack Overflow

Real time/updating Plotly chart in Python/Flask app?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related