Flot で棒グラフを side by side で表示するプラグイン

Flotで、棒グラフを side by side で表示するプラグインがあります。

サンプル画像

サンプルコード

$(document).ready(function() {

	var data_budget = [ [1, 計画値1], [2, 計画値2], [3, 計画値3], [4, 計画値4] ];

	var data_result = [ [1, 実績値1], [2, 実績値2], [3, 実績値3], [4, 実績値4] ];
	$.plot($("#placeholder"), [

		{label:"計画値", bars:{show:true, barWidth:0.2, order:1}, data:data_budget},

		{label:"実績値", bars:{show:true, barWidth:0.2, order:2}, data:data_result}

	], {

	});

});

orderで指定した順に棒グラフを横に並べて表示してくれます。

InnoPMで、月次の計画値と実績値の対比を表示する場合などに利用しています。

このプラグインを使わずに2つのデータを隣り合わせに表示するためには、どちらかの配列のキー(x軸の値)を棒グラフの幅だけ加減するか、barWidthをマイナスにすることでも対応できます。

ただし、配列のキーを変えてしまうとグラフ描画以外の場所で配列が使いにくくなってしまいますし、barWidthをマイナスにすると hoverable:true が使えなくなってしまいます。

そういう意味でも、このプラグインはとても便利です。

なお、調べてみたところ、horizontal:true の場合には order が効かない模様です。