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
