jqueryベースのグラフ描画ライブラリFlot

Flotってご存知ですか

こんにちは。松下です。

みなさんはFlotというjqueryベースのjavascriptグラフ描画ライブラリををご存知でしょうか?

データ形式はjsonで行うことができ、flashベースのOpenFlashChartのように複雑なことはできないですが、きれいなグラフを簡単に描画することができます。

データのやり取りがjson形式で行うためサーバ側でデータをjsonに加工すれば、あとはライブラリがプロットするだけなので、扱いがかなり楽です。

flot sample

簡単なHow toをご紹介したいと思います。

まずは簡単に描画してみる

描画の仕方は、flotの描画ライブラリの呼び出し( $.plot()) 行うだけです。 以下に例を示します。ここでは、第一引数で描画を行う場所、第二引数でデータを設定してライブラリを呼び出しています。

var d1 = [
            [1, 96],
            [2, 89],
            [3, 85],
            [4, 90],
            [5, 87],
            [6, 86],
            [8, 83],
            [9, 86],
         ];
var d2 = [
            [1, 137],
            [2, 135],
            [3, 130],
            [4, 129],
            [5, 120],
            [6, 124],
            [8, 125],
            [9, 126],
         ];

var data_list = [];
data_list[data_list.length] = {label: "low", data:d1};
data_list[data_list.length] = {label: "high", data:d2};

$.plot($("#placeholder"), data_list);

flot sample1

棒グラフも描画することが可能です。

var d1 =  [
        [1950, 2535093],
            [1955, 2770753],
            [1960, 3031931],
            [1965, 3342771],
            [1970, 3698676],
            [1975, 4076080],
            [1980, 4451470],
            [1985, 4855264],
            [1990, 5294879],
            [1995, 5719045],
            [2000, 6124123],
            [2005, 6514751],
            [2010, 6906558],
            [2015, 7295135],
            [2020, 7667090],
            [2025, 8010509],
            [2030, 8317707],
            [2035, 8587050],
            [2040, 8823546],
            [2045, 9025982],
            [2050, 9191287]
        ];

var data_list = [];
data_list[data_list.length] = {label:'total', data:d1};

var options = {
    bars: {
    show: true,
    barWidth: 3,
    align: "center"
  }
};

$.plot($("#bar_placeholder"), data_list, options);

棒グラフ

判例の位置を変える

flotのコードをみると、判例で指定可能なオプションは以下のようになっています。 このうち、position、及びcontainerオプションを使うことで位置の変更をすることが可能です。 positionオプションは、

legend: {
    show: boolean,
    labelFormatter: null or (fn: string -> string),
    labelBoxBorderColor: color,
    noColumns: number,
    position: "ne" or "nw" or "se" or "sw",
    margin: number of pixels,
    backgroundColor: null or color,
    backgroundOpacity: number in 0.0 - 1.0,
    container: null or jQuery object
}

positionオプションは、凡例を領域内で任意の位置に表示ためのオプションで、以下の内容に設定することが可能です。

  • neが右上
  • nwが左上
  • seが右下
  • swが左下

コードでは以下のようにして指定します。このコードでは、左下に配置しています。

var data list = [];
.
.
[略]
.
.

var options = {
    legend:{position:'sw'}
};
$.plot($("#placeholder"), data_list, options);

判例の位置を変える

containerオプションは、判例を表示するコンテナでデフォルトnullで、グラフの描画領域内に表示されます。 containerオプションを使うことで判例の表示をグラフ描画領域外に配置することが可能です。

以下にコードサンプルを示します。

var data list = [];
.
.
[略]
.
.
var options = {
    legend:{container: $("#container")}
};
$.plot($("#placeholder"), data_list, options);

描画領域外に判例を表示する

最後にもう一つ。noColumnsオプションを指定することで、横並びにしたい判例の数を指定できます。 デフォルトでは、判例はすべて縦方向に展開されますが、このオプションを指定することで、同じ行に2個、3個と表示することが可能になります。

以下にコードサンプルを示します。ここでは、1行に2個判例を表示するように設定しています。

var data list = [];
.
.
[略]
.
.
var options = {
    legend:{noColumns: 2}
};
$.plot($("#placeholder"), data_list, options);

判例を横並びにする

いかがでしょうか。ブラウザでグラフを扱いたい方は是非おすすめします。

機会があれば、その他のいろいろな使い方をご紹介したいと思います。

Comments are closed.