今回使用するデータ
前述のとおり、igDataChartではさまざまな形式をサポートしています。本稿では、2013年6月の日経平均株価データをJSON配列として設定したサンプルデータを利用します。データの一部は次のようになっています。
var jpStockData =
[
{ "Date": "4/6/2013", "Start": 13186.6, "High": 13610.25, "Low": 13060.94, "End": 13533.76 },
{ "Date": "5/6/2013", "Start": 13566.75, "High": 13711.42, "Low": 13011.16, "End": 13014.87 },
// 以下省略
];
必要なファイルをページへ追加
先述の「jQueryで地震分布図を作成しよう」記事内の“地図分布の作成”項と同様に、Ignite UIを利用するためには、jQuery、jQuery UIライブラリーをインポートする必要があります。また、同時にModernizrのインポートを行うことで、igDataChartがブラウザの判定に利用します。
今回はインフラジスティックス社のサイトから“Ignite UI 2013 Vol. 1 Complete Bundle（No Installer）”をダウンロードし、HTMLファイルが配置されているフォルダーと同じに階層に“IG”フォルダーを作成し、展開された内容をコピーしました。
さらにIgnite UIでは、コンポーネントの利用に必要なファイルを自動的にロードするInfragistics Loaderという仕組みを提供しています。ローダーを呼び出し、下記のようなパラメータを指定することで、利用するコンポーネントに応じたファイルが自動的にページへと読み込まれたり、テーマが適用されたりと動的に設定を切り替えることが可能になります。
| 設定項目 | 概要 | 今回の設定値 |
|---|---|---|
| scriptPath | Ignite UIのjsファイルが設置されているフォルダー | ‘IG/js’ |
| cssPath | Ignite UIのcssや画像など外観に関するファイルが設置されているフォルダー | ‘IG/css’ |
| resources |
利用するコントロールや機能。 コントロールによっては機能ごとにモジュールが分割されており、 すべての機能を利用する場合はアスタリスク（*）を指定 |
‘igDataChart.*’ |
| theme | 利用するテーマのフォルダーを指定（任意） | 設定なし |
| locale |
ウィジットのローカライズ設定。 日本語版では“ja”があらかじめ設定されている（任意） |
設定なし |
| regional | 地域設定、localeと同時に使用（任意） | 設定なし |
リソースがすべて読み込まれた後に、実際のコントロールの設定を行うことになります。本稿ではリソースが読み込まれた段階でチャートの処理を行うように、ready部分を設定しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>igDataChart</title>
<!-- 必要なスクリプトファイルの読み込み -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<!-- Infragistics Loader を読み込み -->
<script src="IG/js/infragistics.loader.js" type="text/javascript"></script>
<!-- チャートデータを読み込み -->
<script src="SampleData.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
// Infragistics Loader で igDataChart 関連リソースを呼び出します。
$.ig.loader(
{
scriptPath: 'IG/js',
cssPath: 'IG/css',
resources: 'igDataChart.*',
ready: function ()
{
// リソースがロードされた段階で処理を開始します。
}
});
});
</script>
</head>
<body>
</body>
</html>
このリソースの設定方法については、下記のヘルプトピックも参考にしてください。
チャート領域のHTMLタグ設定
igDataChartを利用する場合、idが設定されたdiv要素をページに追加します。その後、チャートそのものの設定はコード内で行うことになります。
<body>
<!-- igDataChart1 というチャート要素を設定しておく -->
<div id="igDataChart1"></div>
</body>
