Sphinx で higcharts を使ってレポート的なの作れないかなぁと思って色々やってみました。

項目バージョン公式
Sphinx1.2.1SPHINX
Higcharts3.0.9Highcharts 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


3月 8, 2014 at 12:51 am by 黒ぶちメガネ
Category: Linux, Sphinx