Highstock＋flask+mysql实现多线条动态刷新
server端：
flask web服务器，接受请求返回数据
from flask import Flask,render_template,request
from mysql import MySql
import time
import datetime
import random
import json
app = Flask(__name__)
def get_data_buyer(sql):
mysql = MySql()
datas = mysql.query_data(sql)
return parse_data_from_db(datas, 'ts', 'buyer')
def get_data_seller(sql):
mysql = MySql()
datas = mysql.query_data(sql)
return parse_data_from_db(datas, 'ts', 'seller')
def get_data_user(sql):
mysql = MySql()
datas = mysql.query_data(sql)
return parse_data_from_db(datas, 'ts', 'login_user')
def _datetime2timestamp(dt):
date_format = "%Y-%m-%d %H:%M:%S"
return time.mktime(time.strptime(str(dt), date_format))
def _timestamp2datetime(ts):
date_format = "%Y-%m-%d %H:%M:%S"
return time.strftime(date_format, time.localtime(ts))
def parse_data_from_db(data, field_ts=None, field_other=None):
if len(data) == 0:
return [], None
results = []
max_time = 0.0
for item in data:
temp = []
ts = _datetime2timestamp(item.get(field_ts))
temp.append(ts * 1000)
if field_other == 'login_user':
temp.append(int(item.get(field_other)) / 100)
else:
temp.append(int(item.get(field_other)))
if ts > max_time:
max_time = ts
results.append(temp)
return results, _timestamp2datetime(max_time)
@app.route('/')
def index():
return render_template('MulLine.html')
@app.route('/data')
def data():
if int(request.args.get('max_time_buyer', 0)) == 0:
sql_buyer = "select * from t_buyer"
else:
last_time_buyer = _timestamp2datetime(float(request.args.get('max_time_buyer', 0)) / 1000.0)
sql_buyer = "select * from t_buyer where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_buyer + '"' + ")"
if int(request.args.get('max_time_seller', 0)) == 0:
sql_seller = "select * from t_seller"
else:
last_time_seller = _timestamp2datetime(float(request.args.get('max_time_seller', 0)) / 1000.0)
sql_seller = "select * from t_seller where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_seller + '"' + ")"
if int(request.args.get('max_time_user', 0)) == 0:
sql_user = "select * from t_user"
else:
last_time_user = _timestamp2datetime(float(request.args.get('max_time_user', 0)) / 1000.0)
sql_user = "select * from t_user where unix_timestamp(ts) > unix_timestamp(" + '"' + last_time_user + '"' + ")"
arr = {}
data_buyer, max_time_buyer_str = get_data_buyer(sql_buyer)
data_seller, max_time_seller_str = get_data_seller(sql_seller)
data_user, max_time_user_str = get_data_user(sql_user)
arr['data_buyer'] = data_buyer
arr['data_seller'] = data_seller
arr['data_user'] = data_user
return json.dumps(arr)
def start_server():
app.run(host='0.0.0.0',port=9999,debug=True)
if __name__=='__main__':
start_server()js文件：
周期性向server请求数据，计算最晚的时间，请求新数据并显示
function find_max_time(times){
max_time = times[0][0]
for(i=1; i < times.length; i++){
if(times[i][0] > max_time){
max_time = times[i][0]
}
}
return max_time
}
$(function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
$.getJSON('/data', function(data){
var param_max_times = {
'max_time_buyer':0,
'max_time_seller':0,
'max_time_user':0
};
param_max_times['max_time_buyer'] = find_max_time(data.data_buyer);
param_max_times['max_time_seller'] = find_max_time(data.data_seller);
param_max_times['max_time_user'] = find_max_time(data.data_user);
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function () {
var series_data_buyer = this.series[0],
series_data_seller = this.series[1],
series_data_user = this.series[2];
setInterval(function() {
$.getJSON('/data', param_max_times, function(data) {
console.log(data);
var data_buyer = data.data_buyer,
data_seller = data.data_seller,
data_user = data.data_user;
if(data_buyer.length > 0){
console.log(data_buyer);
$.each(data_buyer, function(i, d){
series_data_buyer.addPoint(d, true, true)
console.log(d)
});
param_max_times['max_time_buyer'] = find_max_time(data_buyer);
}
if(data_seller.length > 0){
$.each(data_seller, function(i, d){
series_data_seller.addPoint(d, true, true)
});
param_max_times['max_time_seller'] = find_max_time(data_seller);
}
if(data_user.length > 0){
$.each(data_user, function(i, d){
series_data_user.addPoint(d, true, true)
});
param_max_times['max_time_user'] = find_max_time(data_user);
}
});
},1000 * 10)
}
},
borderColor: '#EBBA95',
borderWidth: 2,
borderRadius: 10
},
navigator: {
adaptToUpdatedData: false,
handles: {
backgroundColor: '#9BCD9B',
borderColor: '#9BCD9B'
},
},
legend: {
enabled: true,
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
shadow: true
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
buttons: [{
count: 30,
type: 'second',
text: '30S'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
count: 30,
type: 'minute',
text: '30M'
}, {
count: 1,
type: 'day',
text: '1D'
},{
count: 2,
type: 'day',
text: '2D'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true,
selected: 5
},
title : {
text : 'Customer Statics',
style: {
color: '#5CACEE',
fontWeight: 'bold'
}
},
xAxis: {
title: {
text: 'time'
},
type: 'datetime',
tickPixelInterval: 50
},
yAxis: [{
title: {
text: 'value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
exporting: {
enabled: false
},
series : [{
name : 'buyer',
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
},
data : data.data_buyer
},{
name : 'seller',
tooltip: {
valueDecimals: 2,
valuePrefix: '%',
valueSuffix: ' RMB'
},
data : data.data_seller
},{
name : 'login_user',
tooltip: {
valueDecimals: 2,
valuePrefix: '#',
valueSuffix: ' CCC'
},
data : data.data_user
}]
}
);
});
});