対象読者
jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。
必要環境
「jQueryで地震分布図を作成しよう」においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。
- HTML5マークアップ：CANVAS
- HTML5API：キャンバス
現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法も検討しましょう。
コンポーネントの取得
はじめてIgnite UIを使用する場合は、事前にパッケージを取得する必要があります。Windowsインストーラー形式、あるいは必要ファイルのみがパッケージされた圧縮ファイルをインフラジスティックス社のWebページからダウンロードしてください（サイトへの登録が必要です）。
この製品は有償ですが、20日間すべての機能を試用できる無償トライアル版として利用が可能です。
また、下記記事で紹介されているグリッドについては、商用利用可能な無料版が公開されています。
Ignite UIについて
「Ignite UI」はjQuery、jQuery UI、jQuery MobileをベースとしたHTML5/CSS対応コントロールスイートです。原稿執筆時点での最新バージョンは2013 Volume1となっており、モバイルデバイス、デスクトップ対応のリッチWebアプリケーションを構築するためのコントロールを数多く提供しています。特定の開発環境に依存していませんが、Visual Studioを利用する場合は、ASP.NET MVCのRazor構文でUI部分（View）を構築できるようになっており、Entity Frameworkなど今までのWeb資産を有効に活用できます。このIgnite UIを含め、インフラジスティックス社のコントロールを使用したサンプルについては、オンラインサンプルで確認ができます。
igDataChartについて
前述のとおり、HTML5のキャンバス機能を利用した高機能、高速チャートです。100万点もの大量データをストレスなく表示できることを目指して開発が行われました。また、今回利用するHTML5版だけにとどまらず、WPF、Silverlight、Windows UI（XAML、WinJS）、iOSそれぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。
本稿では入門編として、データ形式並びにチャートの種類の解説、その他チャート要素について紹介します。また、これらの詳細はオンラインヘルプで詳しく説明されています。
対応しているデータ形式
igDataChartは、次の構造のデータをチャートに表現できます。
- JSON形式（クライアント、Web、WCFサービスから）
- XML形式（クライアント、Web、WCFサービスから）
- JavaScript配列
- IQueryable<T>（ASP.NET MVCを利用した場合のみ）
これらのデータは、チャート内部でigDataSourceオブジェクトによって管理されます。igDataSourceオブジェクトについてはこちらを参照してください。チャートのみ利用する場合は、このオブジェクトを意識する必要はありません。
シリーズ
このigDataChartではシリーズというオブジェクトで棒、柱状、ラインなど、チャートの種類を設定し、データへのマッピングを定義します。現在サポートされているチャートの種類については、表1を参照してください。
| 棒 | 柱状 | ライン | エリア |
|---|---|---|---|
| スプライン | スプラインエリアチャート | ウォーターフォール | ロウソク足 |
| OHLC | 極座標散布図 | 極座標折れ線チャート | 極座標エリアチャート |
| ラジアル折れ線チャート | ラジアル柱状チャート | ラジアル円チャート | 範囲エリアチャート |
| 範囲柱状チャート | バブル | 散布図 | 散布図-折れ線 |
それぞれのチャートの種類に合わせて、データのマッピングを設定する必要があります。例えばラインチャートの場合は、valueMemberPathというプロパティにチャートデータを表す項目を設定します。
