Yellowfinでパレート図の作成：FusionCharts	の活用

今回は Yellowfin のグループ会社である FusionCharts が開発・販売する JavaScript ライブラリーを活用してパレート図を作成してみようと思います。

## 1. 事前準備

#### 1-1. ライブラリーの配置
有償のライブラリーですが、14日間の試用が可能です。試してみたい方は[こちら](https://www.fusioncharts.com/download/fusiontime "FusionCharts 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. データの準備
以下の手順では、[こちら](https://github.com/ChasingHH/ShareFiles/blob/Share/pareto.csv "GitHub")からダウンロード可能なサンプルデータを使用します。直接データベースに取り込む、あるいは 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] を 「カラム(列)」 に追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/3ae3c608-3c45-1657-a38d-8f792d766b79.png)

#### 2-2.「グラフ」ステップ
[グラフ] ステップに進み、画面右側 [グラフの選択] から [ JavaScript グラフ] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/e650e752-e031-56b9-b5b5-4b9e9be39edc.png)

##### 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();
        });
    });
}
```

##### プレビュー タブ
[プレビュー] に移り、どのようなパレート図が作成されるか確認します。ちなみに、特定のバーにマウスをホバーすると、ツールチップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/973a7037-d3eb-6573-9618-e0dc2778f90d.png)

## 3. コードの説明
ここでコードの説明に移ります。

##### generateChart
JavaScript グラフの処理において、最初に呼び出されるのが `generateChart = function(options)` です。[データ]ステップで作成したテーブルの中身が、options にオブジェクトとして格納されて、generateChart に引き渡されます。

```JavaScript: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 に格納されます。
```JavaScript: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 の書式になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/3d1018a2-b756-3e3e-ab11-c8c95c633160.png)
画面は [グラフ] ステップでディベロッパーツールのコンソールから確認したものです。コードの中に`console.log(JSON.stringify(ds))`を記述しておくと、データオブジェクトの中身をコンソールで確認することができます。今回であれば、後述の doDrawing メソッドの中に記述があります。デバッグに便利なので、活用してみてください。
 
##### doDrawing
```JavaScript: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` で、[プレビュー]ステップで紹介したツールチップに表示する文面を設定しています。今回定義した項目以外にも、数多くのオプションを設定することができます。詳細は[開発者用サイト](https://www.fusioncharts.com/dev/fusioncharts "開発者用サイト") の 「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 グループ](https://www.idera.com/ "Idera 公式 HP")に仲間入りをしました。様々なアプリやサービスを展開するグループ会社で、今回取り扱った FusionCharts もグループ会社が開発・販売するライブラリーです。今後も、グループ会社のアプリやサービスとうまく連携したソリューションを取り扱っていければと思います。

それでは皆様、‎See you then, Santé! Cheers!