Submit Search
Upload
IgChart 入門編
•
1 like
•
1,226 views
Daizen Ikehara
Follow
NetAdvantage for jQuery の HTML5 チャートコンポーネントである、igChart の入門編です。
Read less
Read more
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 34
Download now
Download to read offline
Recommended
実務者のためのかんたんScalaz
実務者のためのかんたんScalaz
Tomoharu ASAMI
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
CloudFormation 詳細 -ほぼ週刊AWSマイスターシリーズ第6回-
CloudFormation 詳細 -ほぼ週刊AWSマイスターシリーズ第6回-
SORACOM, INC
20120402 aws meister-reloaded-cloud-formation
20120402 aws meister-reloaded-cloud-formation
Amazon Web Services Japan
AWSマイスターシリーズReloaded(AWS Cloudformation)
AWSマイスターシリーズReloaded(AWS Cloudformation)
Akio Katayama
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
Recommended
実務者のためのかんたんScalaz
実務者のためのかんたんScalaz
Tomoharu ASAMI
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
インフラジスティックス・ジャパン株式会社
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
CloudFormation 詳細 -ほぼ週刊AWSマイスターシリーズ第6回-
CloudFormation 詳細 -ほぼ週刊AWSマイスターシリーズ第6回-
SORACOM, INC
20120402 aws meister-reloaded-cloud-formation
20120402 aws meister-reloaded-cloud-formation
Amazon Web Services Japan
AWSマイスターシリーズReloaded(AWS Cloudformation)
AWSマイスターシリーズReloaded(AWS Cloudformation)
Akio Katayama
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
Scalaプログラミング・マニアックス
Scalaプログラミング・マニアックス
Tomoharu ASAMI
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
Yu Ishikawa
Active Directoryデータのプロパティ出力(Output Properties)
Active Directoryデータのプロパティ出力(Output Properties)
Michio Koyama
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Akira Inoue
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
de:code 2017
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Scala on Hadoop
Scala on Hadoop
Shinji Tanaka
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Tomoharu ASAMI
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
ジェネリクスの基礎とクラス設計への応用
ジェネリクスの基礎とクラス設計への応用
nagise
Cocoa勉強会201208
Cocoa勉強会201208
Satoshi Oomori
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
Object-Funcational Analysis and design
Object-Funcational Analysis and design
Tomoharu ASAMI
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
Koichi Hamada
現場的!オンプレとAWSの違い
現場的!オンプレとAWSの違い
真吾 吉田
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
Azure DataLake 大全
Azure DataLake 大全
Daiyu Hatakeyama
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
Daizen Ikehara
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
Daizen Ikehara
More Related Content
Similar to IgChart 入門編
Scalaプログラミング・マニアックス
Scalaプログラミング・マニアックス
Tomoharu ASAMI
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
Yu Ishikawa
Active Directoryデータのプロパティ出力(Output Properties)
Active Directoryデータのプロパティ出力(Output Properties)
Michio Koyama
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Akira Inoue
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
de:code 2017
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
Scala on Hadoop
Scala on Hadoop
Shinji Tanaka
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Tomoharu ASAMI
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
ジェネリクスの基礎とクラス設計への応用
ジェネリクスの基礎とクラス設計への応用
nagise
Cocoa勉強会201208
Cocoa勉強会201208
Satoshi Oomori
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Shogo Sensui
Object-Funcational Analysis and design
Object-Funcational Analysis and design
Tomoharu ASAMI
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
Koichi Hamada
現場的!オンプレとAWSの違い
現場的!オンプレとAWSの違い
真吾 吉田
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
Azure DataLake 大全
Azure DataLake 大全
Daiyu Hatakeyama
Similar to IgChart 入門編
(20)
Scalaプログラミング・マニアックス
Scalaプログラミング・マニアックス
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
2015 03-12 道玄坂LT祭り第2回 Spark DataFrame Introduction
Active Directoryデータのプロパティ出力(Output Properties)
Active Directoryデータのプロパティ出力(Output Properties)
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
[DI07] あらゆるデータに価値がある! アンチ断捨離ストのための Azure Data Lake
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Scala on Hadoop
Scala on Hadoop
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Object-Functional Analysis and Design : 次世代モデリングパラダイムへの道標
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
ジェネリクスの基礎とクラス設計への応用
ジェネリクスの基礎とクラス設計への応用
Cocoa勉強会201208
Cocoa勉強会201208
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
Object-Funcational Analysis and design
Object-Funcational Analysis and design
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる 統計解析・データマイニング R言語入門
現場的!オンプレとAWSの違い
現場的!オンプレとAWSの違い
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Azure DataLake 大全
Azure DataLake 大全
More from Daizen Ikehara
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
Daizen Ikehara
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
Daizen Ikehara
Communications Platform as a Service (CPaaS) 入門
Communications Platform as a Service (CPaaS) 入門
Daizen Ikehara
DevRel Meetupのおかげで転職した話
DevRel Meetupのおかげで転職した話
Daizen Ikehara
エンジニア?のキャリアと英語を考える
エンジニア?のキャリアと英語を考える
Daizen Ikehara
開発者向けカンファレンス出展に向けて考えるべきこと
開発者向けカンファレンス出展に向けて考えるべきこと
Daizen Ikehara
オンラインIDEで爆速オンボーディングと、サンプルコード共有
オンラインIDEで爆速オンボーディングと、サンプルコード共有
Daizen Ikehara
コントロールベンダー視点での Command line interface (CLI)
コントロールベンダー視点での Command line interface (CLI)
Daizen Ikehara
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Daizen Ikehara
ベストタイムは 23 時? グローバル開発チームとの付き合い方
ベストタイムは 23 時? グローバル開発チームとの付き合い方
Daizen Ikehara
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
手戻り ゼロ を目指して
手戻り ゼロ を目指して
Daizen Ikehara
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
Daizen Ikehara
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Daizen Ikehara
Netadvantage 2012 volume2 最新情報 Reporting 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Daizen Ikehara
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Daizen Ikehara
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Windows8 の UX
Windows8 の UX
Daizen Ikehara
高速レポート アプリケーション開発
高速レポート アプリケーション開発
Daizen Ikehara
Devsumi 17 d-2
Devsumi 17 d-2
Daizen Ikehara
More from Daizen Ikehara
(20)
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
Communications Platform as a Service (CPaaS) 入門
Communications Platform as a Service (CPaaS) 入門
DevRel Meetupのおかげで転職した話
DevRel Meetupのおかげで転職した話
エンジニア?のキャリアと英語を考える
エンジニア?のキャリアと英語を考える
開発者向けカンファレンス出展に向けて考えるべきこと
開発者向けカンファレンス出展に向けて考えるべきこと
オンラインIDEで爆速オンボーディングと、サンプルコード共有
オンラインIDEで爆速オンボーディングと、サンプルコード共有
コントロールベンダー視点での Command line interface (CLI)
コントロールベンダー視点での Command line interface (CLI)
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
ベストタイムは 23 時? グローバル開発チームとの付き合い方
ベストタイムは 23 時? グローバル開発チームとの付き合い方
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
手戻り ゼロ を目指して
手戻り ゼロ を目指して
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Windows8 の UX
Windows8 の UX
高速レポート アプリケーション開発
高速レポート アプリケーション開発
Devsumi 17 d-2
Devsumi 17 d-2
IgChart 入門編
1.
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/
Download now