javascript - epochjs charts with python flask -
i have been fighting epochjs last few days , brain exhausted. want have real time line graph part of dashboard shows cpu usage. pulling cpu percentage using psutil , using ajax on front-end json object containing data graph. chart loads in div tag, initial time stamp no chart lines. have feeling json objects aren't correct, i've matched them examples on site epochjs. not sure if examples aren't correct of if it's issue code. appreciated! thanks!
python (flask)
from flask import flask, render_template, response import psutil import time import json app = flask(__name__) def get_timestamp(): return int(time.time()) @app.route('/', methods=['get']) def app_main(): return render_template('index.html') @app.route('/system/cpu/initial', methods=['get']) def cpu_init(): initial_stats = list() cpu_stats = psutil.cpu_percent(percpu=true) t = get_timestamp() in range(len(cpu_stats)): initial_stats.append({ 'label': 'cpu {}'.format(i + 1), 'values': [{'time': t, 'y': int(cpu_stats[i])}] }) return response(json.dumps(initial_stats), mimetype='application/json') @app.route('/system/cpu/update', methods=['get']) def cpu_update(): updates = list() cpu_stats = psutil.cpu_percent(percpu=true) t = get_timestamp() c in cpu_stats: updates.append(dict( values={'time': t, 'y': int(c)} )) return response(json.dumps(updates), mimetype='application/json') if __name__ == '__main__': app.run(port=8080, debug=true) javascript
$(document).ready(function() { $.get('/system/cpu/initial', function(data) { var chart = $('#test-chart').epoch({ axes: ['left', 'bottom'], type: 'time.line', data: data }); setinterval(function() { getinitialdata(chart); }, 1000); }); }); function getinitialdata(chart) { $.get('/system/cpu/update', function(data) { chart.push(data); }); } html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>test epoch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/css/epoch.min.css" /> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/epoch/0.8.4/js/epoch.min.js"></script> <script src="{{ url_for('static', filename='custom.js') }}"></script> </head> <body> <div id="test-chart" class="epoch"></div> </body> </html>
Comments
Post a Comment