NetAdvantage for jQuery の HTML5 チャートコンポーネントである、igChart の入門編です。

2. jQuery/HTML5 チャート:
igChart 入門編
セッションレベル : 200 – Basic
Daizen Ikehara : Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

3. アジェンダ
1 / NetAdvantage for jQuery / igChart 概要
2 / Infragistics Loader
3 / igChart : データ バインディング
4 / igChart : 機能設定とユーザー インタラクション
5 / igChart : イベントハンドリング
6 / まとめ、リソース

4. 1.
NetAdvantage
for jQuery
igChart
概要

5. NetAdvantage シリーズ
Web / RIA Reporting
Win / Rich Mobile
Client
NetAdvantage

6.  高パフォーマンス
 HTML4 + 5
Jquery UI
 豊富な高機能
ベース コント UI ウィジェット
 グリッド
ロール  チャート
 ツリー
jQuery / jQuery UI /  マップ (CTP)
jQuery Mobile を
ベースに独自 UI, 機能  スタイル サポート
を提供
 ASP.NET MVC
ラッパー提供
 jQuery Mobile 対応
UI ウィジェット

7. igChart
• パフォーマンス
HTML5
チャート
• 多様な
チャートタイプ
• モーション
フレームワーク
による動的変更
• XAML 製品と
同等に近い
機能

8. igChart:
HTML5, CSS3,
対応状況
HTML5 マークアップ CANVAS
HTML5 API キャンバス API
CSS3 スタイリング/ なし
アニメーション
旧ブラウザーでの制限 上記機能が利用できない
場合は動作せず

9. 2.
Infragistics
Loader

10.  jQuery / jQuery UI を利用する場合は
スクリプト ファイル、CSS ファイルの参照が必要
JS ライブラリー
利用時のリソース参照
 NetAdvantage for jQuery の関連ファイルは膨大

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

12.  Infragistics Loader の初期化
<script type="text/javascript">
// igLoader の読み込み
Infragistics Loader $.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> 呼び出しなどの処理

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

14.  サポートされる
データ ソース
 igDataSource
 IQueryable<T>
(ASP.NET MVC)
// チャート設定
$("#chart1").igDataChart({
dataSource: data,
…
});

15. X軸 Y軸 その他
 軸の種類 categoryX categoryY
X軸 numericX numericY
Y軸 categoryDatetimeX
 その他
categoryAngle
numericRadius
numericAngle
 軸要件が合えば、複数軸を組み合わせることが可能

16. // チャート設定
軸 $("#chart1").igDataChart({
 axes コレクション dataSource: data,
 type 軸の種類
axes: [
 label {
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)"
}],
…
});

17. bar column line
 チャート要素 area spline splineArea
 シリーズ waterfall candlestick polarScatter
polorarea radialline RadialColumn
radialPie rangeArea rangeColumn
bubble scatter scatterLine
Ohlc
 円チャートは igPieChart にて提供
 複数シリーズを定義可能

18.  シリーズ
 series コレクション // チャート設定
 type $("#chart1").igDataChart({
 xAxis dataSource: data,
 yAxis
…
 valueMember シリーズの種類
Path
series: [
{
type: "line",
name: "volumeSeries",
brush: "rgba(255, 0, 0, 1)",
title: "売上",
markerType: "circle",
xAxis: "xAxis",
yAxis: "volumeAxis",
valueMemberPath: "Volume",
showTooltip: true
}],
});
チャートデータのパス

19. igChart データ表示
DEMO

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

21.  ビルトイン機能
 主要機能 凡例 ナビゲーション ツールチップ
（拡大・縮小）
十字ポインター マーカー トレンドライン
 ユーザー インタラクション シナリオ
ズーム パンニング 表示エリア移動
ホバー 軸線の 軸主線、副線の
表示・非表示 表示・非表示
軸ストライプの 軸ラベルの データ シリーズの
表示・非表示 表示・非表示 表示・非表示
凡例の マーカーの
表示・非表示 表示・非表示

22.  機能 API
 機能API http://help.infragistics.com/jQuery/2012.1/

23.  トレンドラインの設定
 機能の設定例  初期化時にあらかじめ設定
// チャート設定
$("#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",
}],
…
});

24.  ユーザーのアクションから設定を変更
 機能の設定例 // チャートの設定を変更
$("#chart1").igDataChart("option", "series", [{
name: "volumeSeries",
trendLineType: "powerLawFit",
}]);

25. igChart 機能の設定と変更
DEMO

26. 5.
igChart:
データの更新

27.  igChart の強み  大量データをストレスなく表示
 表示後のユーザー インタラクションに対応
 データの更新にも対応
 リアルタイムデータ表示

28.  メソッド API
 メソッドAPI http://help.infragistics.com/jQuery/2012.1/

29. 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);
});

30. igChart データの更新通知
DEMO

31. 6.
まとめ
リソース

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

33. リソース  HTML5
 HTML5 チート シート
http://www.inmotionhosting.com/infographi
cs/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/