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