Sphinx で higcharts を使ってレポート的なの作れないかなぁと思って色々やってみました。
項目 | バージョン | 公式 |
---|---|---|
Sphinx | 1.2.1 | SPHINX |
Higcharts | 3.0.9 | Highcharts JS |
で、できたのがこちら。
※SphinxやHigchartsの説明は割愛します。
■SphinxでHighchartsを使ってみたレポートっぽいやつ
http://www.kurobuti.com/document/example/highcharts/
将来的には、fluentd、mongDBと連携させてmod_security(個人の)のログとかその他諸々解析していきたいなぁ〜って思っています。
※Highchartは商用で利用する場合ライセンスを購入する必要があります。
上記ページは、以下のように作っています。
■Sphinxのソース
ファイル名 : index.rst
.. raw:: html <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script> <script type="text/javascript" src="js/highcharts.js"></script> <script type="text/javascript" src="js/themes/grid.js"></script> ================= レポート ================= CPU使用率 ================= .. raw:: html <div id='cpu_utilization'></div> <script type="text/javascript" src="graph/cpu_utilization.js"></script> | MEM使用率 ========= .. raw:: html <div id='mem_utilization'></div> <script type="text/javascript" src="graph/mem_utilization.js"></script> | ブラウザシェア =============== .. raw:: html <div id='browser'></div> <script type="text/javascript" src="graph/browser.js"></script> .. note:: 最後は値をいじるのがめんどくさくなって `サンプル <http://www.highcharts.com/demo/pie-basic/grid>`_ をそのままコピペしたのは秘密。
■Highchartのjsソース
保存先 : $SPHINX_HOME/_build/html/graph
ファイル名 : cpu_utilization.js
var chart; $(function () { $('#cpu_utilization').highcharts({ title: { text: 'CPU使用率' }, xAxis: { title: { text: '時間' }, type: 'datetime', }, yAxis: { title: { text: '使用率(%)' }, min: 0 }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, plotOptions: { series: { pointInterval: 60 * 60 * 1000 * 2, pointStart: Date.UTC(2014, 2, 1, 0, 0, 0) } }, series: [{ name: 'blade01', data: [10, 15, 10, 20, 10, 50, 65, 55, 55, 50, 30, 20] },{ name: 'blade02', data: [30, 20, 10, 20, 10, 20, 35, 45, 55, 40, 25, 40] },{ name: 'blade03', data: [5, 10, 90, 80, 70, 35, 30, 5, 0, 20, 20, 0] }] }); });
保存先 : $SPHINX_HOME/_build/html/graph
ファイル名 : mem_utilization.js
$(function () { $('#mem_utilization').highcharts({ chart: { type: 'area', spacingBottom: 30 }, title: { text: 'MEM使用率' }, xAxis: { title: { text: '時間' }, type: 'datetime', }, yAxis: { title: { text: '使用率(%)' }, min: 0 }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, plotOptions: { series: { pointInterval: 60 * 60 * 1000 * 2, pointStart: Date.UTC(2014, 2, 1 , 0, 0, 0) } }, series: [{ name: 'blade01', data: [70, 70, 60, 50, 70, 80, 80, 90, 90, 90, 80, 80] }, { name: 'blade02', data: [50, 60, 50, 70, 80, 90, 95, 95, 70, 65, 50, 50] }, { name: 'blade03', data: [10, 20, 25, 30, 35, 40, 40, 30, 50, 60, 45, 10] }] }); });
保存先 : $SPHINX_HOME/_build/html/graph
ファイル名 : browser.js
$(function () { $('#browser').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'ブラウザシェア' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); });
ちなみに、自分はjavascriptなんてほとんど触った事無いのでグーグル先生で検索して表示された先生(ブロガーなど)方々に頼りっぱなしです。
参考文献
1. http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats
2. http://wg.drive.ne.jp/miura/archives/92
3. http://www.ajaxtower.jp/js/function/index2.html
4. http://yubais.net/doc/highcharts/
5. http://sphinx-users.jp/reverse-dict/html/raw.html