二酸化炭素 CO２ 排出量をシリンダーゲージで表現：Yellowfin と FusionCharts の連携

## 1. はじめに
[以前の記事](https://qiita.com/ExtremeCarvFJ/items/337045ea9f8a4c5ffb3b)で、世界の資産分布を把握するために、FusionCharts と連携してピラミッドチャートを作成する方法をお伝えしました。同じことは別のチャートでも表現できるのですが、やはり見た目は重要で、一部の超富裕層が多くの資産を保有している様子は、ピラミッドで表現するのが適しています。
今回は、二酸化炭素 CO2 の排出量を、シリンダーゲージで表現してみようと思います。Yellowfin にも[ゲージ](https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293878)が幾つか備わっていて、これらを用いても同じことは表現できます。ただ、「ちょっとだけ見た目が自分のイメージと違うな」 なんて時に FusionCharts のチャートを使ってみるというのも選択肢の一つです。

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

今回は以下 2 列 3 行の小さなデータを用います。部門ごとの CO2 排出総量 (単位：万トン) を集計した仮想のデータです。
|div|amt|
|---|---|
|部門1|10.1|
|部門2|15.3|
|部門3|8.7|

div を軸 (Dimensions)、amt を集計値 (Metrics) に設定してビューを作成します。

## 2. グラフの作成
準備が整ったら、グラフの作成に手順を進めます。新規でレポートを作成し、以下の手順に従ってグラフを作成します。
#### 2-1. [データ] ステップ
ビューに設定した軸と集計値をテーブルに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/2f9801cb-d781-f0ee-992c-46c635cc88c3.png)

#### 2-2. [グラフ] ステップ
[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/c9d03ea6-7737-d7f9-a439-47225ce7dbee.png)

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

processData = function(dataset) {
    num = 0;
    for (i=0;i<dataset.amt.length;i++){
        num = num + dataset.amt[i].raw_data;
    }
    return num;
},

doDrawing = function(num, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
    const dataSource = {
        chart: {
            caption: "二酸化炭素排出総量(年間)",
            lowerlimit: "0",
            upperlimit: "万50",
            lowerlimitdisplay: "0",
            upperlimitdisplay: "目標上限値",
            numbersuffix: "万トン",
            cylfillcolor: "#c0c0c0"
        },
        value: num
    };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "cylinder",
                renderAt: $chartDrawDiv[0],
                width: 300,
                height: 500,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}
```
##### プレビュー
[プレビュー] に移り、どのようなチャートが作成されるか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/17c7eb1e-27b4-dab4-9cb5-60c5d3d729f7.png)

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

JavaScript グラフの処理において、最初に呼び出されるのが generateChart = function(options) です。
[データ] ステップでテーブルに追加した情報が options に格納されて、メソッドに受け渡されます。
processData でデータ処理を行う関数を、doDrawingで描画するメソッドをそれぞれ呼び出しています。各メソッドで実行する具体的な処理は後述します。

##### processData
```JavaScript:processData
processData = function(dataset) {
    num = 0;
    for (i=0;i<dataset.amt.length;i++){
        num = num + dataset.amt[i].raw_data;
    }
    return num;
},
```
Yellowfin のデータセットを行数分ループして、num 変数に合計値を格納しています。

##### doDrawing
```JavaScript:doDrawing
doDrawing = function(num, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
    const dataSource = {
        chart: {
            caption: "二酸化炭素排出総量(年間)",
            lowerlimit: "0",
            upperlimit: "50万",
            lowerlimitdisplay: "0",
            upperlimitdisplay: "目標上限値",
            numbersuffix: "万トン",
            cylfillcolor: "#c0c0c0"
        },
        value: num
    };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "cylinder",
                renderAt: $chartDrawDiv[0],
                width: 300,
                height: 500,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}
```

`require[]` の中で、JavaScriptライブラリーを格納したディレクトリーを相対パスで記述します。
`dataSource` `chart` の中で、タイトルや目盛などのゲージの見た目を定義しています。
`value: num` で、先の手順で集計した変数の中身を FushionCharts に受け渡しています。
`FusionCharts.ready` でチャートを描画します。
`type: "cylinder”,` でチャートの種類を指定します。
`renderAt: $chartDrawDiv[0]` でチャートを描画する div を指定します。`$chartDrawDiv` はコードの先頭で宣言した変数です。
`width` と `height` はダッシュボードの大きさなどに合わせてピクセル単位で指定します。FusionCharts のサンプルを見ると、%で指定していますが、Yellowfin で扱う場合は、ピクセルで指定した方がきれいに表示されます。

## 4. 最後に
筆者はダイビング目的で様々な海を訪れますが、海の世界はとても繊細で、水温の上昇が水中の生物に大きな影響を与える様をしばしば見かけます。冬場は週末だけスクールでスノーボードを教えていたりしますが、今シーズンは高温と雪不足で、例年よりも早めにスクールがクローズしてしまいました。自分の身近な事柄からも、人間活動が自然に与える影響をひしひしと実感しています。後世のためにも、CO2 排出削減を急ぎ、これ以上の水温や気温の上昇を防がないといけませんね。そのためにも、Yellowfin と FusionCharts の連携で、排出量を管理してみてはいかがでしょうか。といった感じで、少々話をこじつけてみました。

何はともあれ、Yellowfin でコンテンツを作成する際、ちょっとだけ違う見た目のチャートが欲しいな、と思った時は、一度 [FusionCharts](https://www.fusioncharts.com/fusioncharts) のサイトにアクセスしてみて下さい。探しているものが見つかるかもしれませんよ。
では皆様、良いデータ分析を! See you then!! Cheers!!