Yellowfin で株の値動きを分析 ： FusionCharts カギ足の活用

## はじめに
[前回]( https://qiita.com/ExtremeCarvFJ/items/609e771a71f54c3d22b1)、ローソク足を使った株価の値動きの分析を取り扱いました。今回は、カギ足チャートを使った株価の値動き分析を紹介したいと思います。

作成手順に入る前に、作成するチャートのイメージを紹介しておきます。
カギ足チャートは、一定以上の値幅あるいは率が上下に振れた時のみ、線を追加していくもので (前者：定額法カギ足、後者：定率法カギ足) 、値を下げている時は常に下向き、値を上げている時は常に上向きに線が追加されます。一般的には、日単位で終値の前日比を用いることが多く、大まかな値動きを確認する時に使われるチャートです。

[前回]( https://qiita.com/ExtremeCarvFJ/items/609e771a71f54c3d22b1)記事と同じテスラ株の値動きをカギ足チャートで表現すると以下のような感じになります。横軸に日付を配置していますが、厳密には時系列の軸ではありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/60976775-caac-5c82-d3f5-75995909d252.png)

では、実際にチャート作成手順に入っていきましょう。以下の手順では、前回と同じく、NASDAQ 市場に上場するテスラ株 (銘柄コード: TSLA) の直近の値動きを取り扱ってみようと思います。
なお、カギ足チャートの作成には、[Yellowfin](https://yellowfin.co.jp/) [BI](https://yellowfin.co.jp/blog/2019/11/21-blog2-summary-of-bi-tools) のグループ会社 FusionCharts のライブラリを活用します。

## 1. データのダウンロードと取込
カギ足を作成するために、以下のデータを準備します。
・軸 「日付」
・集計値 「終値」
様々なサイトからデータを入手することが可能ですが、前回同様に[『株探』](https://kabutan.jp/)のデータを使わせていただきました。

ダウンロードしたデータは、データベースのテーブルに取り込みます。直接データベースに取り込む以外にも、Yellowfin トランスフォーメーションフローを活用することも可能です。
トランスフォーメーションフロー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293853

## 2. ビューの作成

以下の情報を参考にビューを作成します。
|列名|フィールドタイプ|特記事項|
|---|---|---|
|date|ディメンション|日付などデータの順番を定義できるもの|
|closing|メトリック (集計値)|終値を使うことが多い|

ビュー：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2294284

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

#### 3-1. [データ] ステップ
ビューに設定した軸と集計値を全てテーブルに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/23e15da2-c4c9-7678-ec0d-57c4377eac8e.png)

#### 3-2. [グラフ] ステップ
[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/6564b773-a5f5-979d-c78d-5755c88d2a5f.png)

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

processData = function(dataset) {
    var ds = [];
    for (i=0;i<dataset.date.length;i++){
        ds.push({
            label: dataset.date[i].formatted_data,
            value: dataset.closing[i].raw_data,
        });
    }
    return ds;
},

doDrawing = function(ds, $chartDrawDiv) {
    console.log(JSON.stringify(ds));
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "テスラ株の値動き",
                subcaption: "NASDAQ TSLA",
                numberprefix: "$",
                plottooltext: "$label: <b>$dataValue</b>",
                yAxisMinValue: 700,
                formatNumberScale: 0,
                showValues: 0,
                rallyColor: "#0000cd",
                declineColor: "#ff0000",
                BgColor: "#ffffff",
                showAlternateHGridColor: 0,
                //reversalValue: 50,
                reversalPercentage: "5%"
            },
            data: ds,
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "kagi",
                renderAt: $chartDrawDiv[0],
                width: 550,
                height: 450,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
};
```
##### プレビュータブ
プレビュータブに移ると、冒頭で確認したカギ足チャートが表示されます。当該箇所にマウスをホバーすると、ツールチップで各取引日の終値が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/3fa3ecae-924b-af73-ee2a-011052bc4c32.png)

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

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

##### processData
```JavaScript:processData
processData = function(dataset) {
    var ds = [];
    for (i=0;i<dataset.date.length;i++){
        ds.push({
            label: dataset.date[i].formatted_data,
            value: dataset.closing[i].raw_data,
        });
    }
    return ds;
},
```

Yellowfin のデータセットを JSON の配列に変換して ds にオブジェクトとして格納しています。
今回取り扱うデータであれば、以下のような JSON の書式になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/d267f445-f137-7732-0d0f-6fe87f514323.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'], function(){
        const dataSource = {
            chart: {
                caption: "テスラ株の値動き",
                subcaption: "NASDAQ TSLA",
                numberprefix: "$",
                plottooltext: "$label: <b>$dataValue</b>",
                yAxisMinValue: 700,
                formatNumberScale: 0,
                showValues: 0,
                rallyColor: "#0000cd",
                declineColor: "#ff0000",
                BgColor: "#ffffff",
                showAlternateHGridColor: 0,
                //reversalValue: 50,
                reversalPercentage: "5%"
            },
            data: ds,
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "kagi",
                renderAt: $chartDrawDiv[0],
                width: 550,
                height: 450,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
};
```
ライブラリにデータを受け渡し、チャートを描画する処理を記述しています。
`require[]` の中で、JavaScriptライブラリーを格納したディレクトリーを相対パスで記述します。
`chart: {…}` の中で、タイトル、単位、色、ツールチップ、線の追加条件など、チャートの見た目に関わる設定を施しています。例えば、`plottooltext: "$label: <b>$dataValue</b>"` でマウスを該当箇所にホバーさせた時のツールチップの中身を指定しています。`rallyColor: "#0000cd"` と `declineColor: "#ff0000"` で、上げ傾向と下げ傾向の線の色を定義しています。`reversalValue: 50` あるいは `reversalPercentage: "5%"` で線を追加する条件を指定しています。定額法を用いる場合は reversalValue に条件を絶対値で指定します。定率法を用いる場合は reversalPercentage に条件をパーセントで指定します。上記例では 5% 以上の値動きを線の追加条件としています。
`data: ds` で、processData で作成した JSON の配列を、データオブジェクトとして FusionCharts に受け渡しています。
`FusionCharts.ready(function() {…}` の中で、チャートを描画する HTMLタグの指定や、チャートタイプの指定 `type: "kagi"` などを行っています。
上記以外にも、様々な設定を施すことができます。詳細は[こちら](https://www.fusioncharts.com/dev/chart-attributes/kagi)をご覧ください。

## 5. 最後に
ローソク足やらカギ足やら、株式や債券の値動きに用いられるチャートには、日本語が使われているものが多いですね。
ちなみに、株式以外にも、債券、指数、通貨などの分析にもローソク足チャートやカギ足チャートを活用することが可能です。是非、興味のあるデータを使ってお試しください。
良いデータ分析を! See you then, Cheers!! Santé!!