今回は Yellowfin のグループ会社である FusionCharts が開発・販売する JavaScript ライブラリーを活用してパレート図を作成してみようと思います。
1. 事前準備
1-1. ライブラリーの配置
有償のライブラリーですが、14日間の試用が可能です。試してみたい方はこちら にアクセスしてみてください。
入手したライブラリーは Yellowfin サーバーの以下ディレクトリーに配置します。
(Yellowfin)/appserver/webapps/ROOT/js/chartingLibraries/
1-2. JavaScript グラフの有効化
JavaScript グラフを作成するためには、いくつか Yellowfin サーバーで事前設定が必要です。必要な設定内容に関しては、Wiki の情報を参考にしてください。
JavaScript グラフ有効化: https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293926
1-3. データの準備
以下の手順では、こちらからダウンロード可能なサンプルデータを使用します。直接データベースに取り込む、あるいは Yellowfin のトランスフォーメーションフローを活用するなどして、サンプルデータを Yellowfin が参照できるデータベースに配置します。
なお、軸と集計値をそれぞれ 1 つずつ含む簡単なデータさえあれば、以下の手順を進めることができます。
トランスフォーメーションフロー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293853
1-4. ビューの作成
以下のテーブル情報に従ってビューを作成します。
| 列名 | 書式 | 備考 |
|---|---|---|
| business | テキスト | 軸に利用 |
| sales | 数値型(小数点以下桁数：0) | 集計値に利用 |
ビュー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293852
2. グラフの作成
いよいよ本題に入ります。先の手順で作成したビューを使って、レポートを新規で作成します。
レポート：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293995
2-1.「データ」ステップ
[business] [sales] を 「カラム(列)」 に追加します。
2-2.「グラフ」ステップ
[グラフ] ステップに進み、画面右側 [グラフの選択] から [ JavaScript グラフ] を選択します。
JavaScript タブ
雛形を全て削除し、以下のコードに置き換えます。コードの処理の内容は後ほど説明します。
generateChart = function(options) {
var $chartDrawDiv = $(options.divSelector);
var processedData = processData(options.dataset.data);
doDrawing(processedData, $chartDrawDiv, options.errorCallback);
},
processData = function(dataset) {
var ds = [];
for (i=0;i<dataset.business.length;i++){
ds.push({
label: dataset.business[i].raw_data,
value: dataset.sales[i].raw_data
});
}
return ds
},
doDrawing = function(ds, $chartDrawDiv) {
console.log(JSON.stringify(ds));
require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js', 'js/chartingLibraries/fusioncharts-suite-xt/js/themes/fusioncharts.theme.fusion.js'], function(){
const dataSource = {
chart: {
caption: "事業部別売上",
pyaxisname: "売上高",
theme: "fusion",
showsecondarylimits: "0",
showdivlinesecondaryvalue: "0",
plottooltext:
"2021年度 <b>$label</b>事業部 売上高 <b>$dataValue</b>(同期間全社売上 <b>$sum</b>",
drawcrossline: "1"
},
data: ds,
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "pareto2d",
renderAt: $chartDrawDiv[0],
width: 500,
height: 400,
dataFormat: "json",
dataSource
}).render();
});
});
}
プレビュー タブ
[プレビュー] に移り、どのようなパレート図が作成されるか確認します。ちなみに、特定のバーにマウスをホバーすると、ツールチップが表示されます。
3. コードの説明
ここでコードの説明に移ります。
generateChart
JavaScript グラフの処理において、最初に呼び出されるのが generateChart = function(options) です。[データ]ステップで作成したテーブルの中身が、options にオブジェクトとして格納されて、generateChart に引き渡されます。
generateChart = function(options) {
var $chartDrawDiv = $(options.divSelector);
var processedData = processData(options.dataset.data);
doDrawing(processedData, $chartDrawDiv, options.errorCallback);
},
var $chartDrawDiv = $(options.divSelector)でグラフを出力する div を選択します。
var processedData = processData(options.dataset.data);
doDrawing(processedData, $chartDrawDiv);
上記 2 行で、別の関数を呼び出して、データ処理とグラフ描画処理を行っています。呼び出し先の関数での処理内容は後続の個所で説明をします。
processData
Yellowfin のデータセットを JSON の配列に変換して ds にオブジェクトとして格納しています。for 文の中で、テーブルの行数だけ Loop され、テーブル内の情報が全て JSON 書式で ds に格納されます。
processData = function(dataset) {
var ds = [];
for (i=0;i<dataset.business.length;i++){
ds.push({
label: dataset.business[i].raw_data,
value: dataset.sales[i].raw_data
});
}
return ds
},
今回のサンプルデータであれば、以下のような JSON の書式になります。
画面は [グラフ] ステップでディベロッパーツールのコンソールから確認したものです。コードの中にconsole.log(JSON.stringify(ds))を記述しておくと、データオブジェクトの中身をコンソールで確認することができます。今回であれば、後述の doDrawing メソッドの中に記述があります。デバッグに便利なので、活用してみてください。
doDrawing
doDrawing = function(ds, $chartDrawDiv) {
console.log(JSON.stringify(ds));
require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js', 'js/chartingLibraries/fusioncharts-suite-xt/js/themes/fusioncharts.theme.fusion.js'], function(){
const dataSource = {
chart: {
caption: "事業部別売上",
pyaxisname: "売上高",
theme: "fusion",
showsecondarylimits: "0",
showdivlinesecondaryvalue: "0",
plottooltext:
"2021年度 <b>$label</b>事業部 売上高 <b>$dataValue</b>(同期間全社売上 <b>$sum</b>",
drawcrossline: "1"
},
data: ds,
};
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "pareto2d",
renderAt: $chartDrawDiv[0],
width: 500,
height: 400,
dataFormat: "json",
dataSource
}).render();
});
});
}
require[] の中で、JavaScript ライブラリーを格納したディレクトリーを相対パスで記述します。今回の場合、fusioncharts.js と fusioncharts.theme.fusion.js の2つを指定しています。
chart: の中で、チャートのタイトルや軸に関する設定を施しています。
例えば、plottooltext で、[プレビュー]ステップで紹介したツールチップに表示する文面を設定しています。今回定義した項目以外にも、数多くのオプションを設定することができます。詳細は開発者用サイト の 「Configuring Your Chart」でご確認ください。
data: dsで processData の中でデータを格納した ds オブジェクトを指定します。
FusionCharts.ready でチャートを描画します。
type: "pareto2d" でチャートの種類を指定します。今回は、2 次元のパレート図を指定しています。
renderAt: $chartDrawDiv[0] でチャートを描画する div を指定します。$chartDrawDiv は generateChart の先頭で宣言した変数です。
width と height はダッシュボードの大きさなどに合わせてピクセル単位で指定します。fusionCharts のサンプルを見ると、%で指定していますが、Yellowfin で扱う場合は、ピクセルで指定した方がきれいに表示されます。
4. 最後に
FusionCharts にはたくさんの種類のチャートが準備されています。開発者用のサイトを見ていただくと分かる通り、サンプルのコードを含めとても情報が充実しています。今後も面白いチャートを作成して、Qiita で作成手順を共有したいと思います。
Yellowfin は、先日 Idera グループに仲間入りをしました。様々なアプリやサービスを展開するグループ会社で、今回取り扱った FusionCharts もグループ会社が開発・販売するライブラリーです。今後も、グループ会社のアプリやサービスとうまく連携したソリューションを取り扱っていければと思います。
それでは皆様、See you then, Santé! Cheers!