由于工作要求，需要写一个网页可以实时展示当前用户登入的数据。于是就有了这个flask做后端，HighChart做前段chart， Datatables 做表格展示的小网页。

highcharts 和 datatables 都是开源的，文档很成熟，商业用途需收费
datatables 的官方网站为 http://www.datatables.net
highchart 的官方网站是 https://www.hcharts.cn

Flask

因为我们的数据库是oracle的，所以需要用到cx_oracle, 我之前有文章讲怎么在windows上setup这个库。这里还用了flask_cache 这个库来缓存，这样就不必每次都去数据库拿数据了，怕开销太大。

后端这里我遇到了一个问题，前段ajax从flask拿数据的时候有跨域的问题，这是一个普遍的问题，有多种解决方式，我这里是通过服务端设置Access-Control-Allow-Origin来解决的，用了一个装饰函数allow_cross_domain 来搞定

Highchart

Highchart也遇到了一些问题，我仿照highcharts的官方实时刷新的例子。但是这个例子当添加一个点的时候自动删掉一最老的一个点。参考API文档后发现， chart.series[0].addPoint([x, y]) 函数后面参数用默认值就好了，官方例子都赋值了true , 下面是官方文档对这个函数的说明：

addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])

参数
options: Number|Array|Object数据点的配置，可以是单个数值，表示数据点的 y值；也可以是一个数组，包含 x 和 y 值；还可以是一个对象，包含详细的数据点配置，详细的配置见 series.data。

redraw: Boolean默认是 true，是否在操作完毕后对图标进行重绘操作。当需要增加多个点时，强烈建议将 redraw 设置为 false，并在所有操作结束后手动调用 chart.redraw() 来对图表进行重绘操作。

shift: Boolean默认是 false，当此属性为 true 时，新增点的同时会删除数据列中的第一个点（即保持数据列中数据点的总数不变）。在检测图表中这个属性非常有用。

animation: Mixed默认是 true，即新增点时包含默认动画效果的，这个参数也可以传入包含 duration
及 easing 的对象形式，详细参考动画相关配置。

官方的例子里面的结构看的不爽，我自己重新调整了下结构，更加可读

datatables

datatables 需要实施刷新，官方有个插件去做这个，但是感觉不够灵活。下面的代码即可。网上有些例子是fnCleartable, fnxxx 什么的，是旧版本的，最新的datatables并没有这些函数了。可以去官方的API文档查看

 $('#users').DataTable().clear()
 $('#users').DataTable().rows.add()
 $('#users').DataTable().draw()

后端代码：

from flask import Flask, render_template, make_response, jsonify
from functools import wraps
from flask_cache import Cache
import cx_Oracle


app=Flask(__name__)


# app configuration
app.config['SECRET_KEY']='!@$RFGAVASDGAQQQ'
cache = Cache(app,config={'CACHE_TYPE': 'simple'})

conn = cx_Oracle.connect('BLITZSTAT/BLITZSTAT@10.27.10.18/orcl')      
cursor = conn.cursor ()  


def allow_cross_domain(fun):
    @wraps(fun)
    def wrapper_fun(*args, **kwargs):
        rst = make_response(fun(*args, **kwargs))
        rst.headers['Access-Control-Allow-Origin'] = '*'
        rst.headers['Access-Control-Allow-Methods'] = 'PUT,GET,POST,DELETE'
        allow_headers = "Referer,Accept,Origin,User-Agent"
        rst.headers['Access-Control-Allow-Headers'] = allow_headers
        return rst
    return wrapper_fun

@app.route('/')
@allow_cross_domain
@cache.cached(timeout=2, key_prefix='random')
def index():
    sql_string = "SELECT distinct USERID FROM BLITZSTAT.STG_IS_SESSION_STATS"  
    cursor.execute(sql_string)  
    row = cursor.fetchall()  
    userCount=len(row)

    
    data= {'data':userCount, 'users':row}
    return jsonify(data)

@app.route('/test/')
def test():
    return render_template('test.htm')

if __name__ == '__main__':
    app.run(host='0.0.0.0')

HTML 代码

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <!--link to hchart js-->
        <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        
        <script type="text/javascript" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
        <style type="text/css">${demo.css}</style>
        <script type="text/javascript">
$(function () {

    var chart=  Highcharts.chart('container', 
        {
            chart: {
                //type: 'line',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each second
                        var series = this.series[0]
                    }
                }
            },
            title: {
                text: 'User #'
            },
            xAxis: {
                type: 'datetime',
                tickPixelInterval: 15
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 2);
                }
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [
            {
                name: 'User',
                data:[]
            }]
        });
    
    var mytable = $('#users').DataTable(
            {
                columns: [{ title: "Name" } ]
            }
        );
    
    function updatechart(data)
    {
        var x = (new Date()).getTime(), 
        y = data;
        chart.series[0].addPoint([x, y]);
    }
    
    
    function updateDataTables(users)
    {
        mytable.clear();
        mytable.rows.add(users);

        mytable.draw();
    }
    
    function update()
    {
        $.get("http://yourmachine:5000", function(data)
        {
            updatechart(data.data);
            updateDataTables(data.users);
        })
    }
    
    $(document).ready(function () {

        window.setInterval(update, 1000);

    });
});
        </script>
    </head>
    <body>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="users" class="display" width="100%"></table>
    </body>

</html>

Flask+HighChart+DataTables 创建实时看板