Highcharts Stock 实时图表监控JS

为什么80%的码农都做不了架构师？>>>   

第一次加载时从数据库中抽取监控数据，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();
		}
	};
});

转载于:https://my.oschina.net/ym80/blog/201324