今回は 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 タブ

雛形を全て削除し、以下のコードに置き換えます。コードの処理の内容は後ほど説明します。

JS

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

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

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

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!