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

＃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'
			});
		}

	})
}