第一次加载时从数据库中抽取监控数据,JS生成昨天及上周同天的对比数据。 每分钟动态更新图表。
var bistock = bistock || {};
$(function () {
var seriesOptions = [],
// 历史对比曲线 0当前,1昨天,7上周
periods = [0, 1, 7],
impl,
config,
seriesCount = 0,
charts = [],
get_data_url = false,
update_url = false;
impl = {
config_chart: function() {
Highcharts.setOptions({
colors: ['#DDDF00', '#058DC7', '#50B432', '#ED561B', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
global: { useUTC: false }
});
},
debug: function(msg, vars) {
console.log(msg);
if(vars) {
$.each(vars, function(i, v) {
console.log(i+':'+v);
});
}
},
/**
* 生成监控图表
* @id 图表id
* @div 图表渲染的div
*/
generate_chart: function(id, div) {
var tmp_count = 0;
$.ajax({
type: "get",
async: false,
data: {menuid: id},
url: get_data_url,
dataType: "json",
success: function (response) {
$.each(response.rs, function (series_name, item) {
// 添加历史对比数据
$.each(periods, function (j, period) {
seriesOptions[seriesCount] = {
name: impl.get_series_name(period) + series_name,
data: (period === 0) ? item.data : impl.get_series_data(item.data, period),
type: 'spline',
lineWidth: (seriesCount == 0 || seriesCount == 3) ? 4 : 2
};
impl.debug("Series info: ", {'name':seriesOptions[seriesCount]['name'], 'number': seriesCount});
seriesCount++;
});
});
impl.createChart(seriesOptions, div, id);
seriesOptions = [];
seriesCount = 0;
},
error: function(){
alert('Fail to render to chart '+id);
}
});
},
/**
* 获取图表曲线的名称
* @period 图表曲线周期0,1,7
*/
get_series_name: function (period) {
return (period == 0) ? '当天' : ((period == 1) ? '昨天' : '上周同天');
},
/**
* 获取图表的数据
* @data 原始数据
* @period 图表曲线周期0,1,7
*/
get_series_data: function (data, period) {
var new_series_data = [],
time_offset = period * 86400 * 1000,
now = (new Date()).getTime();
$.each(data, function (i, item) {
// 删除某段时间的数据,然后整体偏移.
var point_data;
if (item[0]+time_offset < now+8*3600*1000-600*1000) {
new_series_data[i] = [item[0] + time_offset, item[1]];
}
});
return new_series_data;
},
/**
* 动态更新图表
*/
updateChart: function(menuid) {
setInterval(function() {
$.ajax({
url: update_url,
type: 'GET',
data: {menuid: menuid},
async: false,
contentType: "application/json; charset=utf-8",
dataType: 'JSON',
success: function(response) {
if (!response.rs) {
impl.debug('No Data');
impl.debug("Chart Info: ",{'menuid': menuid, 'time': response.happen_time});
return;
}
impl.debug("Chart Info: ",{'menuid': menuid, 'time': response.happen_time});
var updateCount = 0;
$.each(response.data, function(i, items){
$.each(items, function(j, item) {
impl.debug("Series info: ", {'data': item, 'number': updateCount});
charts[menuid].series[updateCount].addPoint(item, true, true);
updateCount++;
});
});
updateCount = 0;
},
cache: false
});
}, 60000);
},
/**
* 从缓存中读取历史数据
* @id menuid
* @period 1,7
* @num 数据序列 0,1,2...
* @size 曲线的大小
* @time 当期时间
* @return 返回一个点的数据
*/
get_history_point: function(id, period, num, size, time) {
var idx = (size == 1) ? 0 : num;
var tmp_size = cacheData[id][idx].length;
// fix the time
var tmp_point_data = cacheData[id][idx][tmp_size-period*144+1][1];
return [time, tmp_point_data];
},
rand_point: function(max) {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * max);
return [x,y];
},
/**
* 创建图表
* @seriesData 图表数据
* @div 渲染到div
* @id 图表的唯一id
*/
createChart: function (seriesData,div,id) {
charts[id] = new Highcharts.StockChart({
chart: {
animation: Highcharts.svg,
marginRight: 10,
renderTo: div,
events: {
load: impl.updateChart(id)
}
},
colors: (config['colors']) ? config['colors'] : ['#AA4643','#4572A7','#89A54E','#80699B','#3D96AE','#DB843D','#92A8CD','#A47D7C','#B5CA92'],
rangeSelector: {
buttons: [{
count: 1,
type: 'hour',
text: '1h'
},{
count: 8,
type: 'hour',
text: '8h'
}, {
count: 1,
type: 'day',
text: '1d'
}, {
count: 1,
type: 'week',
text: '1w'
},{
count: 1,
type: 'month',
text: '1m'
},{
count: 3,
type: 'month',
text: '3m'
},{
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 1
},
legend: {
borderWidth: 0,
enabled: true
},
yAxis: {
min: 0,
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}],
labels: {
enabled: config['isEnabled']
}
},
plotOptions: {
series: {
//compare: 'percent'
}
},
tooltip: {
pointFormat: config['isEnabled']
? '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br />'
: '<span style="color:{series.color}">{series.name}</span><br />',
valueDecimals: 2
},
series: seriesData
});
},
run: function() {
impl.config_chart();
$.each(config['names'], function(i, name){
impl.generate_chart(name, 'container_'+i);
});
}
};
bistock = {
init: function(vars) {
config = vars;
impl.run();
}
};
});