線グラフ上でズーム ‐ Yellowfin と FusionCharts の連携

Posted at 2025-03-11

グラフを見ていて気になる箇所があると、該当部分を拡大表示したい要望もあるかと思います。例えば、品質管理の一環として振動の波形が気になる部分を拡大することや、株式が一時的に乱高下している箇所を詳しく見てみたいなどの要望が考えられます。
解決策としては、日付スライダーを利用することも一案です。ただ、どうしてもグラフ上で拡大する場所を選択したいという要望がある時、FusionCharts の Zoom Line チャートを利用することでも実現可能です。

事前準備

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

以前の記事を参考に、『1-2. ビューの作成』までの作業を実施します。
今回は、(株)セブン＆アイ・ホールディングスの株価の値動きを可視化してみます。2005 年 9 月のホールディングス設立時点から、2025 年 3 月 5 日までの日足の終値のデータを扱います ( 出所：Yahoo ファイナンス ) 。以下のように、日付軸と終値の 2 列で構成されたデータです。

date	close
2005-09-01	3360.0
2005-09-02	3520.0
…	…
2025-03-05	1998.0

2. グラフの作成

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

2-1. [データ] ステップ

ビューに設定した軸と集計値をテーブルに配置します。日付の昇順で並び替えをしておきます。

2-2. [グラフ] ステップ

[グラフ] ステップに進み、画面右側 [グラフの選択] から [JavaScriptグラフ] を選択します。

JavaScriptタブ

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

全容

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.date.length;i++){
        ds_category.push(
            dataset.date[i].raw_data
        )
    }
    ds_category = ds_category.join(',');
    console.log(JSON.stringify(ds_category))
    return ds_category
},

processData = function(dataset) {
    var ds_data = [];
    for (i=0;i<dataset.date.length;i++){
        ds_data.push(
            dataset.close[i].raw_data
        );
    }
    ds_data = ds_data.join(',');
    console.log(JSON.stringify(ds_data));
    return ds_data;
},

doDrawing = function(ds_category, ds_data, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "セブン＆アイ・ホールディングス株価値動",
                pixelsperpoint: "0",
                pixelsperlabel: "18",
                compactdatamode: "1",
                dataseparator: ",",
                labelFontSize:"9",
                formatNumber: "1",
                numberScaleUnit:"0",
                canvasBgColor:"696969",
                showAlternateHGridColor:'0',
                divLineColor:"ffffff",
                divLineDashed:"1",
                numDivLines:"2",
                zoomPaneBgColor:"f0e68c",
                zoomPaneBgAlpha:"80",
            },
  categories: [
    {
      category: ds_category
    }
  ],
  dataset: [
    {
      data: ds_data,
      color: "ffff00"
    }
  ]
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "zoomline",
                renderAt: $chartDrawDiv[0],
                width: 800,
                height: 400,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}

プレビューすると、以下のようなチャートが表示されます。

グラフ上で、値が高止まりしている 2015 年 3 月から 2016 年 2 月あたりを選択します。黄色で着色されたです。

2016 年 2 月期は、連結決算としての営業利益が 5 期連続で最高益をたたき出し、セブン・イレブン・ジャパン (SEJ) と 7-Eleven, Inc. (SEI) がともに過去最高益を達成し、イトーヨーカドーなどのスーパーストア事業の苦戦を補った年度でした (詳細はこちら) 。株価も 4,000 円台半ばから 6,000 円台弱の値で推移している様子が見受けられます。

2024年度に、急激に株価が値を下げている箇所があります。この箇所に絞り込んでみましょう。

2024 年 2 月 27 日から 28 にかけて、株価がおよそ 3 分の 1 に急減しています。実は、普通株式を 3 株に株式分割した時期でした (詳細はこちら) 。

拡大率を変えてからスクロールバーを移動させると、その後の値動きも確認できます。

コード

コードの内容を順を追って説明します。

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 に格納されて、メソッドに受け渡されます。
processCategory と ProcessData でデータ処理を行うメソッドを呼び出し、doDrawingで描画するメソッドをそれぞれ呼び出しています。各メソッドで実行する具体的な処理は後述します。

processCategory

processCategory = function(dataset) {
    var ds_category = [];
    for (i=0;i<dataset.date.length;i++){
        ds_category.push(
            dataset.date[i].raw_data
        )
    }
    ds_category = ds_category.join(',');
console.log(JSON.stringify(ds_category))
    return ds_category
},

Zoom Line チャートを作成する場合、軸の項目 (日付 Date) と数値 (終値 close) を分けて処理する必要があります。
processCategory では軸の項目値だけを含むデータセットを生成します。そのために、Yellowfin のデータセットを行数分ループして、ds_category に各軸の項目を格納しています。console.log(JSON.stringify(ds_category)) を仕込んでおくと、下のようにブラウザのコンソールで具体的なデータを確認することができます。

processData

processData = function(dataset) {
    var ds_data = [];
    for (i=0;i<dataset.date.length;i++){
        ds_data.push(
            dataset.close[i].raw_data
        );
    }
    ds_data = ds_data.join(',');
console.log(JSON.stringify(ds_data))
    return ds_data;
},

processData では軸の項目値だけを含むデータセットを生成します。そのために、Yellowfin のデータセットを行数分ループして、ds_data に各軸の項目を格納しています。console.log(JSON.stringify(ds_data)) を仕込んでおくと、下のようにブラウザのコンソールで具体的なデータを確認することができます。

doDrawing

doDrawing = function(ds_category, ds_data, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "セブン＆アイ・ホールディングス株価値動",
                pixelsperpoint: "0",
                pixelsperlabel: "18",
                compactdatamode: "1",
                dataseparator: ",",
                labelFontSize:"9",
                formatNumber: "1",
                numberScaleUnit:"0",
                canvasBgColor:"696969",
                showAlternateHGridColor:'0',
                divLineColor:"ffffff",
                divLineDashed:"1",
                numDivLines:"2",
                zoomPaneBgColor:"f0e68c",
                zoomPaneBgAlpha:"80",
            },
  categories: [
    {
      category: ds_category
    }
  ],
  dataset: [
    {
      data: ds_data,
      color: "ffff00"
    }
  ]
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "zoomline",
                renderAt: $chartDrawDiv[0],
                width: 800,
                height: 400,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}

・require[] の中で、JavaScriptライブラリーを格納したディレクトリーを相対パスで記述します。
・chart の中で、タイトルや色などの見た目を定義しています。こちらに設定可能な属性が一覧で確認できます。かなり細かな設定が可能です。
・categories: [{category: ds_categpry}], と dataset: [{data: ds_data, color: "ffff00"}] で、先の手順で集計したデータセットの中身を FushionCharts に受け渡しています。color でラインの色を指定します。
・FusionCharts.ready でチャートを描画します。
・type: "zoomline” でチャートの種類を指定します。
・renderAt: $chartDrawDiv[0] でチャートを描画する div を指定します。$chartDrawDiv はコードの先頭で宣言した変数です。
・width と height はダッシュボードの大きさなどに合わせてピクセル単位で指定します。FusionCharts のサンプルを見ると、%で指定していますが、Yellowfin で扱う場合は、ピクセルで指定した方がきれいに表示されます。

最後に

昨年から続くカナダのコンビニエンスストア大手アリマンタシォン・クシュタールによる買収提案劇に加え、今年に入って米国人社長の就任が決定するなど、何かと話題に欠かないセブン＆アイ・ホールディングスの株価の値動きを、FusionCharts の Zoom Line で可視化してみました。
個人的には、セブンのお惣菜がお気に入りでよく購入しています。あと、金の〇〇シリーズとか。この前ブラジルから遊びに来ていたブラジル人一家は、セブンのたまごサンドがお気に入りだったそうです。日本で食べた胡麻ドレッシングもずいぶんお気に入りだったようで、胡麻ドレッシングもセブンでまとめて購入していました。
いやぁ、グローバル化ですね。

雑にまとめてみたところで、皆様、良いデータ分析を！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up