Ajaxサンプル開発者ブログ

グラフ作成用のJavaScriptライブラリの１つ、flotの紹介です。

flotはjQueryを利用してグラフを表示するJavaScriptライブラリです。
グラフを表示する際ライブラリ内で<canvas>タグを生成するため、<canvas>タグをサポートしていないIE向けにExplorerCanvasが必要となります。

必要となるJavaScriptライブラリは、flotのサイトからダウンロードしたファイル内に全て含まれているので特に問題はないと思います。

さてflotについてですが、Line Chart(折れ線グラフ)とBar Chart(棒グラフ)のみのサポートですがグラフを範囲指定してその部分だけズームアップできるなど、JavaScriptのみ(Flashを利用していない)のライブラリとしてはまずまずの機能を持っています。

flotのサイトでもサンプルが掲載されていますが、筆者も簡単なサンプルを作成しましたのでどうぞご参照下さい。

• 折れ線グラフを表示する
• 折れ線グラフを表示する(時系列データ版)
• 棒グラフを表示する
• 棒グラフを表示する(時系列データ版)

以下に折れ線グラフを表示するサンプルの記述例を掲載しておきます。

<!-- JS for flot -->
<!--[if IE]><script type="text/javascript" src="/lib/flot/excanvas.pack.js"></script>< ![endif]-->
<script type="text/javascript" src="/lib/flot/jquery.js"></script>
<script type="text/javascript" src="/lib/flot/jquery.flot.pack.js"></script>

<script type="text/javascript">
<!--
/*---------- データの設定 ----------*/
// データ(世界の人口推移)
var populationData = {
  label: "世界の人口の推移 単位(千人)",
  data: [
    [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]
  ]
};

// グラフを描画する
$.plot($("#chart"), [populationData], {
  lines: {  // 折れ線グラフの設定
    show: true
  },
  legend: {  // 凡例の設定
    position: "nw"
  },
  colors: ["rgb(65, 105, 225)"]  // グラフの色
});
//-->
</script>