変動値を考慮した予想平均気温グラフの作成 ： Yellowfin と FusionCharts の活用

今回は、変動値を考慮したグラフを作成してみようと思います。

## 1. 事前準備

#### 1-1. ビューの作成まで

[前回記事](https://qiita.com/ExtremeCarvFJ/items/ad453a6110cec093bdb9)  を参考に、『1-2. ビューの作成』 までの作業を実施します。

今回は以下 3列 12 行のデータを用います。
|lmonth|avg|error|
|---|---|---|
|1月|-4.5|2|
|2月|-4|2|
|3月|0|2|
|4月|7|3|
|5月|12.5|2|
|6月|17|3|
|7月|21|3|
|8月|22|3|
|9月|17.5|2|
|10月|11|2|
|11月|4.5|3|
|12月|-1.5|2|

month を軸 (Dimensions)、avg と error を集計値 (Metrics) に設定してビューを作成します。

## 2. グラフの作成
準備が整ったら、グラフの作成に手順を進めます。新規でレポートを作成し、以下の手順に従ってグラフを作成します。

#### 2-1. [データ] ステップ
ビューに設定した軸と集計値を全てテーブルに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/d128ef63-a8e8-9101-2f8f-cec349b2b255.png)

#### 2-2. [グラフ] ステップ
[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/5c306403-3cc6-6d95-3239-feff00be28bd.png)

##### JavaScriptタブ
雛形を全て削除し、以下のコードに置き換えます。コードの処理の内容は後ほど説明します。
```javascript:JS
generateChart = function(options) {
    var $chartDrawDiv = $(options.divSelector);
    var processedCategory = processCategory(options.dataset.data);
    var processedData = processData(options.dataset.data);
    doDrawing(processedCategory, processedData, $chartDrawDiv);
},

processCategory = function(dataset) {
    var ds_category = [];
    for (i=0;i<dataset.month.length;i++){
            ds_category.push({
                label: dataset.month[i].raw_data,
            });
    }
    return ds_category;
},

processData = function(dataset) {
    var ds_data = [];
    for (ii=0;ii<dataset.avg.length;ii++){
            ds_data.push({
                value: dataset.avg[ii].raw_data,
                errorvalue: dataset.error[ii].raw_data,
            });
    }
    return ds_data;
},


doDrawing = function(ds_category, ds_data, $chartDrawDiv) {
    console.log(JSON.stringify(ds_category));
    console.log(JSON.stringify(ds_data));
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "毎月の平均気温予想(地域：？)",
                numbersuffix: "°C",
                linethickness: "2",
                linedashed: "1",
                errorbarthickness: "3",
                showlegend: "0",
                halferrorbar: "0",
                plottooltext: "$labelの$seriesName：$dataValue",
                theme: "fusion"
            },
            categories: [
                {
                    category: ds_category
                }
            ],
            dataset: [
                {
                    seriesname: "平均(予想)",
                    data: ds_data
                }
            ]
        };
        
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "errorline",
                renderAt: $chartDrawDiv[0],
                width: 700,
                height: 500,
                dataFormat: "json",
                dataSource
            }).render();
        });
    });
};
```
##### プレビュー
[プレビュー] に移り、どのようなチャートが作成されるか確認します。マウスをホバーすると、ツールチップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/5e421032-86eb-a63e-cbef-fb0d6cd75c48.png)

## 3. コードの内容
動作概要が分かったところで、コードの中身を見てみましょう。
##### generateChart
```JavaScript:generateChart
generateChart = function(options) {
    var $chartDrawDiv = $(options.divSelector);
    var processedCategory = processCategory(options.dataset.data);
    var processedData = processData(options.dataset.data);
    doDrawing(processedCategory, processedData, $chartDrawDiv);
},
```

JavaScript グラフの処理において、最初に呼び出されるのが generateChart = function(options) です。
[データ] ステップでテーブルに追加した情報が、options に格納されて、メソッドに受け渡されます。
`var $chartDrawDiv = $(options.divSelector)` でグラフを出力する div を選択します。
`var processedCategory = processCategory(options.dataset.data);`
`var processedData = processData(options.dataset.data);`
`doDrawing(processedCategory , processedData, $chartDrawDiv);`
上記3行で、別の関数を呼び出して、データ処理とグラフ描画処理を行っています。呼び出し先の関数での処理内容は後続の個所で説明をします。

##### processCategory
```JavaScript:processCategory
processCategory = function(dataset) {
    var ds_category = [];
    for (i=0;i<dataset.month.length;i++){
            ds_category.push({
                label: dataset.month[i].raw_data,
            });
    }
    return ds_category;
},
```

Yellowfin のデータセットを JSON の配列に変換して ds_category にオブジェクトとして格納しています。
今回のサンプルデータであれば、以下のような JSON の書式になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/ffda5d1f-47f7-414e-b1af-672c8d05af6a.png)

画面は [グラフ] ステップでディベロッパーツールのコンソールから確認したものです。コードの中に `console.log(JSON.stringify(ds_category))` を記述しておくと、データオブジェクトの中身をコンソールで確認することができます。今回の場合は、doDrawing の先頭に記述しています。デバッグに便利なので、活用してみてください。

##### processData
```JavaScript:processData
processData = function(dataset) {
    var ds_data = [];
    for (ii=0;ii<dataset.avg.length;ii++){
            ds_data.push({
                value: dataset.avg[ii].raw_data,
                errorvalue: dataset.error[ii].raw_data,
            });
    }
    return ds_data;
},
```
Yellowfin のデータセットを JSON の配列に変換して ds_data にオブジェクトとして格納しています。
今回のサンプルデータであれば、以下のような JSON の書式になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/e08103ce-5081-78a0-b32d-db9bd12557be.png)

##### doDrawing
```JavaScript:doDrawing
doDrawing = function(ds_category, ds_data, $chartDrawDiv) {
    console.log(JSON.stringify(ds_category));
    console.log(JSON.stringify(ds_data));
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "毎月の平均気温予想(地域：？)",
                numbersuffix: "°C",
                linethickness: "2",
                linedashed: "1",
                errorbarthickness: "3",
                showlegend: "0",
                halferrorbar: "0",
                plottooltext: "$labelの$seriesName：$dataValue",
                theme: "fusion"
            },
            categories: [
                {
                    category: ds_category
                }
            ],
            dataset: [
                {
                    seriesname: "平均(予想)",
                    data: ds_data
                }
            ]
        };
        
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "errorline",
                renderAt: $chartDrawDiv[0],
                width: 700,
                height: 500,
                dataFormat: "json",
                dataSource
            }).render();
        });
    });
};
```
`require[]` の中で、JavaScriptライブラリーを格納したディレクトリーを相対パスで記述します。
`dataSource` `chart` の中で、タイトルなどを含むチャートの見た目に関する設定を定義しています。
`plottooltext:` で指定した文面が、ツールチップで表示されます。
`data: ds_category` で `ds_category` データセットの中身を FushionCharts に受け渡しています。
同様に、`data: ds_data` で `ds_data` データセットの中身を FushionCharts に受け渡しています。

`FusionCharts.ready` でチャートを描画します。
`type: "errorline",` でチャートの種類を指定します。`type: ”errorbar2d”` に変更すると、以下のような棒グラフに表示が変わります。今回の例であれば、棒グラフでも良いかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/5f7f150c-23dd-79b9-8a7a-343dcacaf068.png)
 
`renderAt: $chartDrawDiv[0]` でチャートを描画する div を指定します。`$chartDrawDiv` はコードの先頭で宣言した変数です。
`width` と `height` はダッシュボードの大きさなどに合わせてピクセル単位で指定します。FusionCharts のサンプルを見ると、%で指定していますが、Yellowfin で扱う場合は、ピクセルで指定した方がきれいに表示されます。

## 4. 最後に
今回は気温を取り扱いましたが、生産管理、品質管理、収益予想など、様々な場面で使うことができるチャートです。是非、活用してみてください。
ところで、気温といえば、地球の温暖化とともに、平均気温・水温も徐々に上がりつつある様子。筆者としては、海の生態系がとても繊細であることをダイビング中に実感しています。串本 (和歌山県) で沖縄から流れ着く熱帯の魚を観察できることがあるのですが、水温上昇に伴い、本来越冬しない魚が、串本で越冬するようになってきました。石垣島では、マンタが出現する場所が何年か前とは異なってきていたり、水温上昇で死滅したサンゴがビーチにたくさん打ち上げられています。将来の世代のためにも、自然を大切にしないといけませんね。
と、記事の内容とはほぼ関係ない話で締めくくりました (いつもより熱く語っている気がする、、、)。

では、良いデータ分析を! Cheers!!