仕事でjQueryのグラフ描画に特化したプラグイン”jqplot”を使ったので、使い方を備忘録として書き留めておく。環境としてはCakePHP2.2.2にjqplot1.0.4とjqplotに付属してきたjQueryを組み込んで使用した。

CakePHP2.xへの組み込み方としては、簡単な説明になってしまうが、jsフォルダ以下にjQueryとjqplotを配置し、Viewで以下のように読み込めば良い。

<?php
    echo $this->Html->script('jquery');
?>
<?php
    echo $this->Html->script('jquery.jqplot');
?>

jqplotはjQueryのプラグインという位置付けなので、使用する為にはjQuery本体の準備が必要である。

グラフを描いてみる

積み上げ棒グラフを描いてみた。これは、ゲームの継続率の詳細を表すと仮定した内容のグラフである。棒グラフの上に継続率、棒グラフの色が継続率の分布、棒グラフの下に日付、折線が登録者数を表している。

以下、CakePHPに組み込んだ際のコードになる。分かり辛くなるのを避ける為に動的なコードは静的なものに置き換えてある。冒頭のjsファイルとcssの読み込みのパスさえ合っていれば、そのままコピペして使用可能である。

<?php echo $this->Html->css('jquery.jqplot'); ?>
<!--[if lt IE 9]><?php echo $this->Html->script('excanvas'); ?><![endif]-->
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('jquery.jqplot'); ?>
<?php echo $this->Html->script('plugins/jqplot.barRenderer'); ?>
<?php echo $this->Html->script('plugins/jqplot.pointLabels'); ?>
<?php echo $this->Html->script('plugins/jqplot.highlighter'); ?>
<?php echo $this->Html->script('plugins/jqplot.cursor'); ?>
<?php echo $this->Html->script('plugins/jqplot.categoryAxisRenderer'); ?>
<script type="text/javascript">
$(document).ready(function() {
    //パーセンテージを表す積み重ね棒グラフの変数
    var p1 = [67, 50, 58, 40, 35, 33, 38, 2.76497]; //0%
    var p2 = [7, 5, 3, 9, 12, 12, 10, 7.83410]; //1～10%
    var p3 = [2, 3, 5, 6, 8, 6, 8, 9.67741]; //11～20%
    var p4 = [1, 7, 2, 7, 10, 8, 10, 12.90322]; //21～30%
    var p5 = [2, 6, 7, 12, 11, 14, 9, 16.12903]; //31～40%
    var p6 = [7, 5, 3, 4, 5, 2, 4, 13.82488]; //41～50%
    var p7 = [2, 3, 5, 3, 3, 4, 4, 11.98156]; //51～60%
    var p8 = [1, 7, 2, 4, 4, 3, 6, 9.67741]; //61～70%
    var p9 = [2, 6, 7, 9, 7, 9, 4, 6.45161]; //71～80%
    var p10 = [7, 5, 3, 5, 4, 4, 4, 5.52995]; //81～90%
    var p11 = [2, 3, 5, 1, 1, 5, 3, 3.22580]; //91～100%
    //日付ごとのユーザー数を表す線グラフの変数
    var sumUser = [[1, 40], [2, 21], [3, 820], [4, 60], [5, 80], [6, 90], [7, 100], [8, 110] ];
    // chart data 積み重ね棒グラフの継続率分布
    var dataArray = [ p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, sumUser ];
    // x-axis ticks 登録日
    var xticks = [ '12月', '1月', '02-01', '02-02', '02-03', '02-04', '02-05', '02-06' ];
    // x2-axis ticks 登録日ごとの継続率
    var x2ticks = [ '12.65%', '9.82%', '7.65%', '9.2%', '8.4675%', '11.2525%', '12.5678%', '14.5432%' ];
    // chart rendering options
    var options = {
        stackSeries: true,
        title: '継続率',
        cursor: {
            show: true,
            zoom: false,
            looseZoom: false,
            showTooltip: false
        },
        legend: {
            show: true,
            location: 'ne',
            placement: 'outsideGrid'
        },
        series: [
            {label: '0%', useNegativeColors: false},
            {label: '1～10%', useNegativeColors: false},
            {label: '11～20%', useNegativeColors: false},
            {label: '21～30%', useNegativeColors: false},
            {label: '31～40%', useNegativeColors: false},
            {label: '41～50%', useNegativeColors: false},
            {label: '51～60%', useNegativeColors: false},
            {label: '61～70%', useNegativeColors: false},
            {label: '71～80%', useNegativeColors: false},
            {label: '81～90%', useNegativeColors: false},
            {label: '91～100%', useNegativeColors: false},
            {
                label: '登録者数'
                disableStack : true,
                renderer: jQuery.jqplot.LineRenderer,
                lineWidth: 2,
                pointLabels: { show: false },
                color: '#FF7D7D',
                markerOptions: { size: 5, color: 'red' },
                xaxis: 'x2axis',
                yaxis: 'y2axis'
            }
        ],
        seriesDefaults: {
            renderer:jQuery.jqplot.BarRenderer,
            rendererOptions: { 
                barWidth: 35,
                shadowAlpha: 0.03,
                fillToZero: true,
                highlightMouseOver: false
            },
            pointLabels: {show: true}
        },
        axes: { 
            xaxis: {
                label:"日付",
                renderer: jQuery.jqplot.CategoryAxisRenderer,
                labelOptions: { fontSize: '20pt' },
                ticks: xticks
            },
            x2axis: {
                label:"継続率(%)",
                renderer: jQuery.jqplot.CategoryAxisRenderer,
                labelOptions: { fontSize: '20pt' },
                ticks: x2ticks
            },
            yaxis: {
                label:"継\n続\n率\n分\n布\n(%)",
                labelOptions: { fontSize: '20pt' },
                tickOptions: { formatString: '%.2f%' },
                min: 0, max: 100, numberTicks:11
            },
            y2axis: {
                label:"登\n録\n者\n数",
                labelOptions: { fontSize: '20pt' },
                tickOptions: { formatString: '%d人' },
                min: 0
            }
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5 ,
            tooltipLocation : 'ne'
        }
    };
    jQuery.jqplot('graph', dataArray, options);
});
</script>

<div id="graph" style="height:600px;width:800px;margin:30px;">

参考
jqPlot – jQuery プラグイン