SimpleDao
plotly使用渲染图标chart
2019-05-06, 访问数: 1457

使用bottle

  1. import json
  3. from bottle import route, run, template, Bottle, response
  5. import argparse
  6. import pandas as pd
  8. from plotly import utils
  9. import plotly.graph_objs as go
  11. from requests.compat import json as _json
  13. from influxdb import DataFrameClient
  15. app = Bottle()
  17. @app.hook('after_request')
  18. def enable_cors():
  19.     response.headers['Access-Control-Allow-Origin'] = '*'
  20.     response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, OPTIONS'
  21.     response.headers['Access-Control-Allow-Headers'] = 'Origin, Accept, Content-Type, X-Requested-With, X-CSRF-Token'
  23. @app.route('/data')
  24. def index():
  25.     client = DataFrameClient('127.0.0.1', '8086', database='dc')
  26.     res = client.query('select sum(succ), sum(fail) from p group by host limit 10')
  28.     data = []
  29.     for metric, df in res.items():
  30.         print df
  31.         trace = go.Bar(
  32.             x=df[df.columns[0]],
  33.             y=df[df.columns[1]],
  34.             name=str(metric),
  35.         )
  36.         data.append(trace)
  37.     layout = go.Layout()
  38.     data_json = _json.dumps(data, cls=utils.PlotlyJSONEncoder)
  39.     layout_json = _json.dumps(layout, cls=utils.PlotlyJSONEncoder)
  40.     data_dict = json.loads(data_json)
  41.     layout_dict = json.loads(layout_json)
  42.     return {'records': data_dict, 'layout': layout_dict}
  44. @app.route('/pie')
  45. def pie():
  46.     client = DataFrameClient('127.0.0.1', '8086', database='dc')
  47.     res = client.query('select sum(succ), sum(fail) from p group by host limit 10')
  49.     data = []
  50.     labels = []
  51.     pds = []
  52.     for metric, df in res.items():
  53.         print metric, df
  54.         print '---------', df.columns, df.columns.values
  55.         labels.append(str(metric) + df.columns[0])
  56.         labels.append(str(metric) + df.columns[1])
  57.         pds.append(df[df.columns[0]])
  58.         pds.append(df[df.columns[1]])
  59.     trace = go.Pie(
  60.         labels=labels,
  61.         values=pd.concat(pds),
  62.         name=str(metric),
  63.     )
  64.     data.append(trace)
  65.     layout = go.Layout()
  66.     data_json = _json.dumps(data, cls=utils.PlotlyJSONEncoder)
  67.     layout_json = _json.dumps(layout, cls=utils.PlotlyJSONEncoder)
  68.     data_dict = json.loads(data_json)
  69.     layout_dict = json.loads(layout_json)
  70.     return {'records': data_dict, 'layout': layout_dict}
  72. @app.route('/line')
  73. def line():
  74.     client = DataFrameClient('127.0.0.1', '8086', database='dc')
  75.     res = client.query('select sum(succ), sum(fail) from p where time > now() - 1d and succ > 0 group by time(1h) limit 10')
  77.     data = []
  78.     for metric, df in res.items():
  79.         print metric, df
  80.         print '---------', df.index
  81.         for col in df.columns.values:
  82.             trace = go.Scatter(
  83.                 x=df.index,
  84.                 y=df[col],
  85.                 name=str(metric),
  86.             )
  87.             data.append(trace)
  88.     layout = go.Layout()
  89.     data_json = _json.dumps(data, cls=utils.PlotlyJSONEncoder)
  90.     layout_json = _json.dumps(layout, cls=utils.PlotlyJSONEncoder)
  91.     data_dict = json.loads(data_json)
  92.     layout_dict = json.loads(layout_json)
  93.     return {'records': data_dict, 'layout': layout_dict}
  95. run(app, host='localhost', port=8080, debug=True)

html

  1. <html>
  2. <head>
  3.     <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
  4.     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  5. </head>
  7. <div id="plot" style="width:90%;height:600px;"></div>
  8. <div id="plot_query"></div>
  10. <script>
  11.     function makeplot() {
  12.         $.ajax({
  13.             url: 'http://127.0.0.1:8080/pie',
  14.             data: {
  15.             },
  16.             dataType: 'json',
  17.             success: function (result) {
  18.                 console.log(result);
  19.                 //result = JSON.parse(result);
  20.                 console.log(result.records);
  21.                 console.log(result.layout);
  22.                 makePlotly(result.query, result.records, result.layout);
  23.                 document.getElementById("plot_query").innerHTML = result.query;
  24.             }
  25.         });
  26.     };
  28.     function makePlotly(title,  traces, layout){
  29.         var plotDiv = document.getElementById("plot");
  30.         Plotly.newPlot('plot', traces, layout);
  31.     };
  33.     makeplot();
  34. </script>
  35. </html>
编程语言
nodejs npm包安装
pssh,pscp工具使用
最近文章
文章分类