小技シリーズ第 9 弾 ダッシュボード上で特定のレポートを拡大 その２

はじめに

前回 『小技シリーズ第 7 弾 ダッシュボード上で特定のレポートを拡大』 の記事で、Yellowfin のダッシュボードに配置するボタンから CSS を操作して、特定のチャートだけを拡大表示させる小技を紹介しました。今回は、高さや幅などのレポート属性を直接変更することで、特定レポートを拡大・縮小する方法を紹介したいと思います。いずれの方法でも、ほぼ同じ結果をもたらしますが、拡大時の解像度などを考慮すると、今回紹介する方法の方が適切かもしれません。

ダッシュボードの作成

ダッシュボードを新規で作成し、1 つのレポートと2つのボタンウィジェットを配置します。例えば以下のような感じで配置をします。
レポートは左ナビゲーションの [レポート] から、ボタンは左ナビゲーションの [ウィジェット] > [ボタン] からそれぞれ選択します。
ダッシュボード：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293823

ダッシュボードの編集画面から、配置したレポートに任意の名前を設定します。下記の例では、名前に「vertical_bar」を設定しています。ここで設定する名前を後述の JavaScript の中で指定するため、名前には半角英数の文字を用いてください。

1つ目のボタンの [名前] に「zoomin」、[ボタンのテキスト] に「拡大」と入力します。同様に、2つ目のボタンの [名前] に「zoomout」、[ボタンのテキスト] に「縮小」と入力します。ここで設定する名前を後述の JavaScriptの中で指定するため、名前には半角英数の文字を用いてください。

コードモード

ここで画面をコードモードに切り替えて、HTML の記述内容を確認します。

先の手順でレポートやボタンに設定した name の値が、HMTL に反映されているのが分かります (赤枠)。

JS モードに切り替えて、雛形のコードを全て削除し、以下を貼り付けます。

JS

var chart = this.apis.canvas.select("vertical_bar");
var zoomIn = this.apis.canvas.select("zoomin");
var zoomOut = this.apis.canvas.select("zoomout");

zoomIn.addEventListener('click', zoomInOutReport);
zoomOut.addEventListener('click', zoomInOutReport);

function zoomInOutReport() {
    var iconName = event.currentTarget.getAttribute("name");
    var width_chart = parseInt(chart.getAttribute("width"));
    var height_chart = parseInt(chart.getAttribute("height"));
    if (iconName == "zoomin") {
        width_chart = "900";
        height_chart = "600";
    } else if (iconName == "zoomout") {
        width_chart = "450";
        height_chart = "300";
    }
    chart.setAttribute("width", width_chart);
    chart.setAttribute("height", height_chart);
}

コードの説明

コードの記述内容を簡単に説明します。

最初の 3 行は変数の宣言です。ダブルクォーテーションの中に、レポートやボタンに設定した name を指定します。

JS

var chart = this.apis.canvas.select("vertical_bar");
var zoomIn = this.apis.canvas.select("zoomin");
var zoomOut = this.apis.canvas.select("zoomout");

4-5 行で、ボタンを押下した際に呼び出す関数を指定しています。

JS

zoomIn.addEventListener('click', zoomInOutReport);
zoomOut.addEventListener('click', zoomInOutReport);

function zoomInOutReport() の中で、ボタンを押下した際の動作を定義します。zoomin ボタンを押下した際と、zoomout ボタンを押下した際で、それぞれ棒グラフの属性に設定する幅と高さをピクセル単位で設定しています。

JS

function zoomInOutReport() {
    var iconName = event.currentTarget.getAttribute("name");
    var width_chart = parseInt(chart.getAttribute("width"));
    var height_chart = parseInt(chart.getAttribute("height"));
    if (iconName == "zoomin") {
        width_chart = "900";
        height_chart = "600";
    } else if (iconName == "zoomout") {
        width_chart = "450";
        height_chart = "300";
    }
    chart.setAttribute("width", width_chart);
    chart.setAttribute("height", height_chart);
}

動作確認

ダッシュボードを公開して、動作を確認します。レポートの横幅が狭いため、横軸の文字列が見づらいですね。

そこで、[拡大] ボタンを押下すると、レポートのサイズが縦横それぞれ倍のサイズに拡大されました。横軸の文字列の感覚が広がり、見やすくなりましたね。

[縮小] ボタンを押下すると、半分のサイズに戻ります。

最後に

レポートの設定内容を簡単にコードモードで操作することができましたね。同じ理屈で、ちょっと工夫を加えると、表示するレポートの切り替えなんかにも応用できます。

では皆様、良いデータ分析を! À bientôt! Cheers!