Highcharts Stock 實時圖表監控JS
higcharts 是一個圖表展示框架，支持基本圖形，支持靜態、動態等數據，文檔很詳細，實例代碼很多，容易上手，這個JS是我的一個獲取實時動態數據的JS腳本，依賴JQUERY.
第一次加載時從數據庫中抽取監控數據，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();
}
};
});</pre>
來自：http://my.oschina.net/ym80/blog/201324
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！