igchart 入門編

jQuery/HTML5 チャート:igChart 入門編

セッションレベル : 200 – Basic

Daizen Ikehara : Developer Evangelistdikehara@infragistics.comTwitter @Neri78

アジェンダ1 / NetAdvantage for jQuery / igChart 概要

2 / Infragistics Loader

3 / igChart : データバインディング

4 / igChart : 機能設定とユーザーインタラクション

5 / igChart : イベントハンドリング

6 / まとめ、リソース

1. NetAdvantagefor jQueryigChart概要

NetAdvantage シリーズ

NetAdvantage

Web / RIAWin / Rich Client

ReportingMobile

高パフォーマンス

HTML4 + 5

豊富な高機能UI ウィジェット

グリッドチャートツリーマップ (CTP)

スタイルサポート

ASP.NET MVC ラッパー提供

jQuery Mobile 対応UI ウィジェット

Jquery UI

ベース コント

ロール

jQuery / jQuery UI /

jQuery Mobile を

ベースに独自 UI, 機能

を提供

igChart

• パフォーマンスHTML5 チャート

• 多様なチャートタイプ

• モーションフレームワークによる動的変更

• XAML 製品と同等に近い機能

igChart:

HTML5, CSS3,

対応状況

HTML5 マークアップ CANVAS

HTML5 API キャンバス API

CSS3 スタイリング/アニメーション

なし

旧ブラウザーでの制限 上記機能が利用できない場合は動作せず

2. InfragisticsLoader

jQuery / jQuery UI を利用する場合はスクリプトファイル、CSS ファイルの参照が必要

JS ライブラリー

利用時のリソース参照

NetAdvantage for jQuery の関連ファイルは膨大

Infragistics Loader を利用することで関連リソースの参照、読み込みを自動化

Infragistics Loader 使用前

使用後

Infragistics Loader の初期化

リソース指定をし、初期化する場合

Infragistics Loader

からの呼び出し方法

<script type="text/javascript">// igLoader の読み込み$.ig.loader({

scriptPath: 'Scripts/IG',cssPath: 'Content/IG'

});

</script>

<script type="text/javascript">// igLoader の読み込み$.ig.loader({

scriptPath: 'Scripts/IG',cssPath: 'Content/IG',resources: 'igDataChart.*',ready: function () {// Do something}

});</script>

読み込みリソース

コンポーネント呼び出しなどの処理

3. igChart:データバインディング

サポートされるデータソース

igDataSource

IQueryable<T>

(ASP.NET MVC)

// チャート設定$("#chart1").igDataChart({

dataSource: data,…

});

軸要件が合えば、複数軸を組み合わせることが可能

軸の種類 X 軸 Y 軸 その他

X軸 Y軸 その他

categoryX categoryY

numericX numericY

categoryDatetimeX

categoryAngle

numericRadius

numericAngle

軸 axes コレクション

type

label

// チャート設定$("#chart1").igDataChart({

dataSource: data,axes: [{

type: "categoryX",name: "xAxis",label: "DateString",stroke: "rgba(0, 0, 0, 0.5)",strokeThickness: 5,interval: 1

}, {

type: "numericY",name: "volumeAxis",labelVisibility: "collapsed",stroke: "rgba(0, 0, 0, 0.5)",majorStroke: "rgba(0, 0, 0, 0)"

}],…

});

軸の種類

ラベルデータへのバインド(必要な軸のみ)

円チャートは igPieChart にて提供複数シリーズを定義可能

チャート要素 シリーズ

bar column line

area spline splineArea

waterfall candlestick polarScatter

polorarea radialline RadialColumn

radialPie rangeArea rangeColumn

bubble scatter scatterLine

Ohlc

シリーズ series コレクション

type

xAxis

yAxis

valueMember

Path

// チャート設定$("#chart1").igDataChart({

dataSource: data,…

series: [{

type: "line",name: "volumeSeries",brush: "rgba(255, 0, 0, 1)",title: "売上",markerType: "circle",xAxis: "xAxis",yAxis: "volumeAxis",valueMemberPath: "Volume",showTooltip: true

}],});

シリーズの種類

チャートデータのパス

DEMOigChart データ表示

4. 機能設定とユーザーインタラクション

ビルトイン機能

ユーザーインタラクションシナリオ

主要機能 凡例 ナビゲーション（拡大・縮小）

ツールチップ

十字ポインター マーカー トレンドライン

ズーム パンニング 表示エリア移動

ホバー 軸線の表示・非表示

軸主線、副線の表示・非表示

軸ストライプの表示・非表示

軸ラベルの表示・非表示

データ シリーズの表示・非表示

凡例の表示・非表示

マーカーの表示・非表示

機能API

機能 API

http://help.infragistics.com/jQuery/2012.1/

トレンドラインの設定初期化時にあらかじめ設定

機能の設定例

// チャート設定$("#chart1").igDataChart({

dataSource: data,…series: [{

type: "line",name: "volumeSeries",brush: "rgba(255, 0, 0, 1)",title: "売上",xAxis: "xAxis",yAxis: "volumeAxis",valueMemberPath: "Volume",showTooltip: true,markerType: "square",trendLineThickness: 5,trendLineBrush: "rgba(0, 100, 0, 1)",trendLineType: "modifiedAverage",

}],…

});

ユーザーのアクションから設定を変更

機能の設定例 // チャートの設定を変更$("#chart1").igDataChart("option", "series", [{

name: "volumeSeries",trendLineType: "powerLawFit",

}]);

DEMOigChart 機能の設定と変更

5. igChart:データの更新

大量データをストレスなく表示表示後のユーザーインタラクションに対応データの更新にも対応

リアルタイムデータ表示

igChart の強み

メソッドAPI

メソッド API

http://help.infragistics.com/jQuery/2012.1/

1. データを作成し、チャートに更新されたことを通知

データの追加と通知

$('#add').live('click', function () {// 新規データ作成var newData ={

"DateString": "2.1.2010","Open": 1000, "High": 1028.75, "Low":

985.25,"Close": 1020, "Volume": 1950 +

Math.random() * 100};data.push(newData);// チャートに変更を通知$("#chart1").igDataChart("notifyInsertItem",

data, data.length - 1, newData);

});

DEMOigChart データの更新通知

6. まとめリソース

まとめ igChart 入門編igChart 概要Infragistics LoaderigChart データ バインディングigChart 機能設定とユーザー インタラクション

igChart データ更新

HTML5 HTML5 チート シート

http://www.inmotionhosting.com/infographics/html5-cheat-sheet/

ブラウザー 対応状況http://www.findmebyip.com/litmus/

jQuery jQuery

http://jquery.com/ jQuery UI

http://jqueryui.com/

NetAdvantage for jQuery 製品紹介

http://jp.infragistics.com オンライン サンプル

http://samples.jp.infragistics.com/ Blog

http://blogs.jp.infragistics.com/blogs/ オンライン API

http://help.infragistics.com/jQuery/2012.1/

リソース