roniemartinez / real-time-charts-with-flask

Sample application for the blog "Creating Real-Time Charts with Flask"

Creating Real-Time Charts with Flask

Sample application for the blog Creating Real-Time Charts with Flask

Demo

Go to https://chart.ron.sh/ to see this in action.

Build and run

docker-compose build
docker-compose up  # or "docker-compose up -d" to run in detached mode 

Open http://127.0.0.1:5000/ in browser

Author

Ronie Martinez

References

• Flask Progress Example
• Chart.js Line Chart

real-time-charts-with-flask's Issues

Asking

Hi Ronnie, how r u?

i wanna ask about this code below

@application.route('/chart-data')
def chart_data():
    def generate_random_data():
        while True:
            json_data = json.dumps(
                {'time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'), 'value': random.random() * 100})
            yield f"data:{json_data}\n\n"
            time.sleep(1)

    return Response(generate_random_data(), mimetype='text/event-stream')

why you make 2 method/function (chart_data() & generate_random_data()) in this route?

Typo in "/chart-data" (index.html) means graph doesn't find data stream

Hi there,

Thanks for writing this clear example. I noticed that running the code doesn't actually have the intended effect: the graph doesn't update, though if you navigate to /chart_data you can see the JSON data being written.

The reason is you have a small inconsistency between the flask app.py and the index.html template - you go from an underscore to a hyphen in "/chart-data".

Cheers!