はじめに

項目数が多いデータを Yellowfin の棒グラフで可視化する場合、表示の調整に困ることもあるかと思います。例えば、47 都道府県の人口データ (出所：総務省統計曲)を棒グラフで表示する場合、以下のようにフォントが重なってしまうこともしばしばです。

解決策としては、フィルターやドリルダウン軸を使って表示データを絞り込むことも一案です。どうしてもスクロールバーが欲しいという場合、FusionCharts のスクロールバー付き棒グラフをご利用いただくことで無事解決してしまいます。ということで、FusionCharts のスクロールバー付き棒グラフ作成手順を見ていきましょう。

事前準備

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

以前の記事を参考に、『1-2. ビューの作成』までの作業を実施します。
47 都道府県の人口データは、都道府県名と人口の 2 列で構成される表データです。都道府県名を軸 (Dimensions)、人口を集計値 (Metrics) に設定してビューを作成します。

2. グラフの作成

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

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

ビューに設定した軸と集計値をテーブルに配置します。

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

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

JavaScriptタブ

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

全容

generateChart = function(options) {
   var $chartDrawDiv = $(options.divSelector);
   var processedLabel = processLabel(options.dataset.data);
   var processedValue = processValue(options.dataset.data);
   doDrawing(processedLabel, processedValue, $chartDrawDiv);
},

processLabel = function(dataset) {
    var ds_label = [];
    for (i=0;i<dataset.prefecture.length;i++){
        ds_label.push({
            label: dataset.prefecture[i].raw_data,
        });
    }
    console.log(JSON.stringify(ds_label));
    return ds_label
},

processValue = function(dataset) {
    var ds_value = [];
    for (i=0;i<dataset.prefecture.length;i++){
        ds_value.push({
            value: dataset.population[i].raw_data
        });
    }
    console.log(JSON.stringify(ds_value));
    return ds_value
},

doDrawing = function(ds_label, ds_value, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "都道府県別人口",
                subcaption: "(2023年10月1日現在)",
                plottooltext: "$dataValue人",
                yaxisname: "人口",
                xaxisname: "都道府県名",
                useRoundEdges: 1,
                divLineAlpha: 0,
                showAlternateVGridColor: 0,
                
            },
  categories: [
    {
      category: ds_label
    }
  ],
  dataset: [
    {
      data: ds_value
    }
  ]
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "scrollbar2d",
                renderAt: $chartDrawDiv[0],
                width: 700,
                height: 400,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}

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

スクロールして表示内容を変更することも可能です。

コード

generateChart

generateChart

generateChart = function(options) {
   var $chartDrawDiv = $(options.divSelector);
   var processedLabel = processLabel(options.dataset.data);
   var processedValue = processValue(options.dataset.data);
   doDrawing(processedLabel, processedValue, $chartDrawDiv);
},

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

processLabel

processLabal

processLabel = function(dataset) {
    var ds_label = [];
    for (i=0;i<dataset.prefecture.length;i++){
        ds_label.push({
            label: dataset.prefecture[i].raw_data,
        });
    }
    console.log(JSON.stringify(ds_label));
    return ds_label
},

スクロールバー付きの棒グラフを作成する場合、軸の項目 (都道府県名) と数値 (人口) を分けて処理し、別々のデータセットとして取り扱う必要があります。
processLabel では軸の項目値だけを含むデータセットを生成します。そのために、Yellowfin のデータセットを行数分ループして、ds_label に各軸の項目を格納しています。console.log(JSON.stringify(ds_label)) を仕込んでおくと、下のようにブラウザのコンソールで具体的なデータを確認することができます。

processValue

processValue

processValue = function(dataset) {
    var ds_value = [];
    for (i=0;i<dataset.prefecture.length;i++){
        ds_value.push({
            value: dataset.population[i].raw_data
        });
    }
    return ds_value
},

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

doDrawing

doDrawing

doDrawing = function(ds_label, ds_value, $chartDrawDiv) {
    require(['js/chartingLibraries/fusioncharts-suite-xt/js/fusioncharts.js'], function(){
        const dataSource = {
            chart: {
                caption: "都道府県別人口",
                subcaption: "(2023年10月1日現在)",
                plottooltext: "$dataValue人",
                yaxisname: "人口",
                xaxisname: "都道府県名",
                useRoundEdges: 1,
                divLineAlpha: 0,
                showAlternateVGridColor: 0,
                
            },
  categories: [
    {
      category: ds_label
    }
  ],
  dataset: [
    {
      data: ds_value
    }
  ]
        };
        FusionCharts.ready(function() {
            var myChart = new FusionCharts({
                type: "scrollbar2d",
                renderAt: $chartDrawDiv[0],
                width: 700,
                height: 400,
                dataFormat: "json",
                dataSource
              }).render();
        });
    });
}

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

最後に

分析画面に見やすさを追求することは重要です。
今後もかゆいところに手が届くような小技を色々とお届したいと思います。

では皆様、良いデータ分析を！