Highcharts
#Cross domain data It is not possible to use the jQuery .getJSON() function on JSON files outside of your own domain. It is however possible to use JSONP. The difference between JSON and JSONP is that in a regular JSON file you would just use the ordinary
www.highcharts.com
tdiethe/flask-live-charts
Live charting demo using flask and highcharts. Contribute to tdiethe/flask-live-charts development by creating an account on GitHub.
github.com
실시간 그래프 그리기
위의 코드를 조금 수정해보았습니다.
더보기
Flask
import json
from time import time
from flask import Flask, render_template, make_response
import psutil
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/live_resource')
def live_resource():
cpu = psutil.cpu_percent()
data = [time() * 1000, cpu]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
if __name__ == '__main__':
app.run(debug=True)HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
figure {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">jvvp.tistory.com</a>
</div>
</div>
</div>
<figure>
<div class="container-fluid">
<div class="row">
<div class="container-fluid" id="container"></div>
</div>
</div>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="/static/js/chart.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>JS
var chart;
function requestData() {
$.ajax({
url: '/live_resource',
success: function(point) {
console.log(point)
var series = chart.series[0],
shift = series.data.length > 20;
chart.series[0].addPoint(point, true, shift);
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Realtime CPU Resource'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'percent',
margin: 80
}
},
series: [{
name: 'CPU',
data: []
}]
});
});
클라이언트는 서버에 지속적으로 서버에 데이터를 요청하고 chart 객체에 데이터를 추가하여 그래프를 그려주게 됩니다.
setTimeout() 으로 1초마다 재귀호출을 합니다.
function requestData() {
$.ajax({
url: '/live_resource',
success: function(point) {
console.log(point)
var series = chart.series[0],
shift = series.data.length > 20;
chart.series[0].addPoint(point, true, shift);
setTimeout(requestData, 1000);
},
cache: false
});
}
ajax 를 통해 호출되는 부분으로 현재 시간 데이터와 CPU 데이터를 JSON 타입으로 반환하고 있습니다.
@app.route('/live_resource')
def live_resource():
cpu = psutil.cpu_percent()
data = [time() * 1000, cpu]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
'Language > Javascript' 카테고리의 다른 글
| Summernote 사용하기 (0) | 2020.08.03 |
|---|---|
| 네이버 SmartEditor2 사용하기 (0) | 2020.08.03 |
| jQuery Highcharts 를 이용한 그래프 그리기 -1 (0) | 2020.07.28 |
| jQuery Ajax 다루기 -1 : GET / POST (1) | 2020.07.28 |
| jQuery Mincolors(색상피커) 플러그인 사용하기 (0) | 2020.07.13 |
