PowerPoint プレゼンテーション

REST API と Dojo を使って
グラフを描く
株式会社ソルクシーズ
吉田 武司
0. はじめに
• ノーツクライアントの中でグラフを描きたいことってありませんか？
• 営業情報やアンケート結果などを表示できると便利ですよね。
• 実装の仕方にはいろいろありますが、ある一つの方法をご紹介したいと思います。
• 動作環境
– スタンダードクライアント（残念ながらベーシッククライアントでは動きません）
– Notes/Domino 9
1. サーバーの設定
• [サーバー文書] – [インターネットプロトコル] – [Domino Web Engine]
• [Domino アクセスサービス] – [有効なサービス] に [Data] を追加
2. データベースの設定
• データベースプロパティの [詳細]タブ – [IBM Domino データサービス
を許可] で [ビューのみ] or [ビューと文書] を選択
3. ビューの設定
• ビュー設計プロパティの [詳細]タブ – [Web アクセス] – [IBM Domino
データサービスの操作を許可] を有効
4. http タスクの再起動と動作確認
• http タスクを再起動して設定変更を反映
• ブラウザでアクセスしてデータが取得できるかを確認
http://[DominoServer名]/[DBパス]/[DB名]/api/data/collections/name/[View名]?ps=[Data取得件数（文書数）]
http://domino2/test/chart.nsf/api/data/collections/name/vwData?ps=12
XPage を用意
• コントロールの [その他…] から [コア
コントロール] – [出力スクリプト] を選
択して XPage に配置
リソースの登録（Dojo モジュール）
• XPage のプロパティの [リソース] で [追加] – [Dojo モジュール] を選択
• Dojo モジュール名に “dojox.charting.Chart2D” を記述
JavaScript を記述
• 出力スクリプトの [すべてのプロパティ] – [value] にグラフを描く
JavaScript を記述
JavaScript
// グラフを描く drawChart 関数の準備
var drawChart = function(){
var labels = [
{value: 1, text: "1月"}, {value: 2, text: "2月"},
{value: 3, text: "3月"}, {value: 4, text: "4月"},
{value: 5, text: "5月"}, {value: 6, text: "6月"},
{value: 7, text: "7月"}, {value: 8, text: "8月"},
{value: 9, text: "9月"}, {value: 10, text: "10月"},
{value: 11, text: "11月"}, {value: 12, text: "12月"}
];
var xmlhttp = new XMLHttpRequest();
var url = "";
var result = [];
// データを返すビューの URL （環境にあわせて変更してください！）
url = 'http://domino2/chart/chartDB.nsf/api/data/collections/unid/8BE3BDA0246E1AB749257D9F001470A3?ps=12'
xmlhttp.open('GET',url,false);
xmlhttp.send(null);
result = eval( '(' + xmlhttp.responseText + ')' );
var contracts=[];
for (var i=0;i<12;++i){
contracts.push(result[i].fNewUser);
};
var myChart = new dojox.charting.Chart2D("myChart");
myChart.addPlot("default", {type: "Lines"});
myChart.addPlot("grid", {type: "Grid"});
myChart.addSeries("新規顧客数", contracts, {stroke: {color: "red", width: 3}});
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
myChart.addAxis("x", {majorTickStep: 1, natural: true, labels: labels});
myChart.addAxis("y", {vertical: true, fixUpper: "major", includeZero: true});
myChart.render();
}
// dojo のパース完了後に drawChart 関数を呼び出す
dojo.addOnLoad(drawChart);
データベースの起動時の設定
• データベースプロパティの [起動] タブで作成した XPages を指定
• スタンダードクライアントで開く場合は、[サーバーベースの XPages ア
プリケーションをサーバー上で直接…] を指定
完成
• ノーツクライアントでデータベースを開く！！