Bootstrap の Datepicker の値変更から発火して Morris.Bar（グラフ）の値を変更する

期間指定して、集計値をグラフを表示する場合のサンプル。
サクッとできたけど面白かったし、また使う気がするのでメモ。

＃Bootstrap v3.2.0 (http://getbootstrap.com)
＃jQuery v1.10.2

HTMLのパーツはこんな感じ。
期間指定する、start-date と、end-date という id の inputフォームを置きます。

<p>集計期間</p>
<p>
<input id="start-date" name="start-date" type="text" readonly="readonly">
〜
<input id="end-date" name="end-date" type="text" readonly="readonly">
</p>
<div id="hero-bar" class="graph" style="height: 200px"></div>

そして、jsでdatepickerが動くようにします。

$('#start-date').datepicker({
    format: 'yyyy-mm',
    language: 'ja',
    autoclose: true,
    todayHighlight: true,
    endDate: Date(),
    minViewMode: 'months',
}).datepicker('setDate', '0')
;

$('#end-date').datepicker({
    format: 'yyyy-mm',
    language: 'ja',
    autoclose: true,
    todayHighlight: true,
    endDate: Date(),
    minViewMode: 'months',
}).datepicker('setDate', '0');

datepickerで日付が変更されたら発火するところはこんな感じに。
発火してgetSummaryという名前の関数を呼ぶよ。

// 期間の変更
$('#start-date').datepicker()
        .on('changeDate', function(e){
            getSummary($('#start-date').val(), $('#end-date').val());
        });
$('#end-date').datepicker()
        .on('changeDate', function(e){
            getSummary($('#start-date').val(),  $('#end-date').val());
        });

さぁ、あとは Morris.Bar を表示する。

function getSummary(startdate, enddate) {
    var params = new Object();
    $("#hero-bar").empty(); //これがないとこの関数を呼ぶたびにグラフがどんどん増える
    $.ajax({
        type: "POST",
        url: "/sample/ajax?startdate=" + startdate + "&enddate=" + enddate, // データはいい感じにとってください
        data: params,
    })
    .done(function(json){
        if (json.status != "success") return;
        if (json.data.length == 0) {
            return;
        }
        if ($("#hero-bar")) {
            var jdata = json.data; //$.parseJSON(json.data)　とか、返ってくる値によっていろいろ
            Morris.Bar({
                element: 'hero-bar', //ここで指定したidの要素に表示されるみたい
                data: jdata,
                xkey: 'title',
                ykeys: ['summary'],
                labels: ['合計'],
                barRatio: 0.4,
                xLabelAngle: 0,
                hideHover: 'auto'
            });
        }

    })
}