Plotting real time monitoring with Flask and Vuejs.

                        X   Y1   Y2   Y3
0 2020-12-30 11:04:54 78 309 485
1 2020-12-30 11:04:55 214 199 484
2 2020-12-30 11:04:56 101 377 18
3 2020-12-30 11:04:57 149 365 134
4 2020-12-30 11:04:58 243 177 203
5 2020-12-30 11:04:59 48 125 57
....

Client side implementation.

  1. Vuejs
  2. Charjs Library
  3. Our Chartjs wrapper for Vuejs
  4. Vue Resource
Complete file here
{
"chart_data": {
"datasets": [
{
"backgroundColor": "#483D8B",
"borderColor": "#483D8B",
"borderWidth": 2,
"data": [
32,
112,
102,
...
],
"fill": false,
"label": "name_Y1",
"lineTension": 0,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
},
{
"backgroundColor": "#f87979",
"borderColor": "#f87979",
"borderWidth": 2,
"data": [
153,
2,
335,
...
],
"fill": false,
"label": "name_Y2",
"lineTension": 0.23,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
},
{
"backgroundColor": "#00BFFF",
"borderColor": "#00BFFF",
"borderWidth": 2,
"data": [
267,
262,
232,
...
],
"fill": false,
"label": "name_Y3",
"lineTension": 0.46,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
}
],
"labels": [
"21:33:26",
"21:33:27",
"21:33:28",
...
]
}
}
{
"chart_data": {
"datasets": [
{
"backgroundColor": "#483D8B",
"borderColor": "#483D8B",
"borderWidth": 2,
"data": [
114
],
"fill": false,
"label": "name_Y1",
"lineTension": 0,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
},
{
"backgroundColor": "#f87979",
"borderColor": "#f87979",
"borderWidth": 2,
"data": [
430
],
"fill": false,
"label": "name_Y2",
"lineTension": 0.23,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
},
{
"backgroundColor": "#00BFFF",
"borderColor": "#00BFFF",
"borderWidth": 2,
"data": [
368
],
"fill": false,
"label": "name_Y3",
"lineTension": 0.46,
"pointBorderColor": "#000000",
"pointBorderWidth": 1,
"pointRadius": 2
}
],
"labels": [
"21:33:46"
]
}
}

Server side implementation.

from flask import Flask, request, jsonify
from flask_cors import CORS
import pandas as pd
  1. Flask
  2. Cors, in this case because our domains are diferrent we need to allow CORS
  3. Pandas
app = Flask(__name__)
CORS(app)
Complete file here
Final result
$ python3 server.py

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Miguel Frazão

Miguel Frazão

Full Stack Developer/Architect since 2013, working mostly on the Back end part of the Software recently.