Real time graph using flask
Ever wondered how to create a real time data dashboard without having to refresh the web app from time to time? Real time graph can play an important role in visualizing the outcome of machine learning and deep learning models which deal with real time data.
Flask along with j-query can be used to implement one such real time dashboard.
Let us start exploring the server side code written in python and flask.Let the file be named as server.py
The endpoint “/_stuff ” returns a json of a random number between (0,10).
Coming to the front end , the graph is embedded using the opensource platform chart.js which provides wide variety of plots.
Make sure that u embed your j-query in the index.html file (extends “dy0.html” first line in index.html)
The above code shows how to embed the graphs from chart.js . The canvas element is used to display the graph .
For in-depth explanation visit the site “ https://www.chartjs.org/”
Now looking at the functionality to push the real time random numbers generated through the end point “/_stuff” .
a function updated_values() is created which gets called after every 1’s ,the function retrieves the random number generated through the endpoint “/_stuff” and passes it to the graph labelled as “myChart”
Below is the program for customizing the graph style and graph data.
Make sure you embed all your JavaScript code between the <script> tag.
The above model is a part of the real time head count implementation using python and opencv.
Cheers…
Do give a clap if you like the article.
