対象読者
jQueryや最新のWeb技術に興味のある人。データ視覚化に興味のある人。
必要環境
『jQueryで地震分布図を作成しよう』においても言及されているように、開発環境やプラットフォームには依存しません。コード編集用のエディタと動作確認用のブラウザのみを用意してください。ただし、今回利用するigDataChartコントロールは下記の機能を利用しています。対応していないブラウザでは正しく動作しません。
- HTML5マークアップ：CANVAS
- HTML5 API：キャンバス
現在のような過渡期では、キャンバス機能が使えないブラウザではその旨を表示したり、別の表現方法に差し替えたりする方法を検討しましょう。
コンポーネントの取得
はじめて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それぞれのプラットフォームにおいて共通の機能セットを持ったコントロールとして提供されています。
チャートを財務チャートとして表示
本題に入る前に、今回の記事は前回の記事のサンプルをスタート地点としていますが、jQueryおよびjQuery UIのバージョンアップを実施し、下記の部分が変更となっている点に注意してください。
<!-- 必要なスクリプトファイルの読み込み --> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
また、前回はチャートタイプをlineとして折れ線を表示していましたが、バインドしたデータは株価の情報なので、今回は財務チャートに変更したうえでインタラクション機能を利用します。財務チャートとして利用する場合、軸の設定以外に最低限下記のプロパティをシリーズオブジェクトに設定することになります。
| プロパティ名 | 説明 | 設定値 |
|---|---|---|
| type | 財務チャートを表すシリーズタイプ | financial |
| opemnMemberPath | 始値を表すデータへのバインド | Start |
| lowMemberPath | 安値を表すデータへのバインド | Low |
| highMemberPath | 高値を表すデータへのバインド | High |
| closeMemberPath | 終値を表すデータへのバインド | End |
$("#igDataChart1").igDataChart({
// … 省略
// シリーズの設定
series:
[
{
name: "stockSeries",
type: "financial",
xAxis: "axisX",
yAxis: "axisY",
openMemberPath: "Start",
lowMemberPath: "Low",
highMemberPath: "High",
closeMemberPath: "End",
title: "株価"
}
});
ページを開くと、ローソク足チャートが表示されました。
