はじめに

D3やBootstrapを使ったより高度なQlik Sense Mashupの開発(前編)に引き続き、当エントリでもBootstrapやD3を使ったQlik Sense Mashupの開発方法をご説明します。このエントリでは以下の様な形で、BootstrapでデザインしたKPIやD3.jsを使って描画した棒グラフを追加する手順をご説明します。

image

KPIパネルの追加

では、以下のようなイメージのKPIパネルを追加したいと思います。

image

まず、Hypercubeと呼ばれるQlik Senseが内部的に保持するキューブのイメージを作成します。集計軸とメジャーを指定してHypercubeを作成することで、Mashupの部品から呼び出してHypercubeの集計軸とメジャーを使って集計処理を行い、その集計結果をMashupの部品に表示させることができます。

Hypercubeの作成

右側メニューから「Hypercubes」タブを開き、「Add Hypercube」 ボタンをクリックします。

1

以下の通りに選択・入力を行って、「Add」をクリックします。ここでは、軸を指定せずに「Sum([Sales Amount])」(売上合計)を集計し、「salesAmount」という名称のコールバック関数を呼び出す設定を行っています。

2

MashupDemo.jsタブを開き、以下のコードが追加されたことを確認します。

image

image

KPIオブジェクトのページへの追加

次にページへKPIオブジェクトの部品を追加して保存します。この時点では部品を追加するだけで、売上合計の値はまだ表示されません。

<div class="row">
      <div class="col-lg-3 col-md-6">
          <div class="panel panel-primary">
              <div class="panel-heading">
                  <div class="row">
                      <div class="col-xs-3">
                          <i class="glyphicon glyphicon-usd"></i>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div class="huge kpi"></div>
                          <div class="small">Total Sales Amount</div>
                      </div>
                  </div>
              </div>
              <a href="#">
                  <div class="panel-footer">
                      <span class="pull-left small">View Details</span>
                      <span class="pull-right"><i class="glyphicon glyphicon-play-circle"></i></span>
                      <div class="clearfix"></div>
                  </div>
              </a>
          </div>
      </div>    
</div>

image

MashupDemo.cssタブを開き、以下のCSSコードを追加して保存します。

.glyphicon.glyphicon-usd {
    font-size: 50px;
}
.huge {
  font-size: 24px;
}
.small {
  font-size: 13px;
}

image

集計値表示のためのコールバック関数の修正

現状ではKPIのオブジェクトに集計値が表示されない状態となっていますので、次にコールバック関数を修正して集計値を表示させるようにします。

MashupDemo.jsを開き、以下のコードを「salesAmount」コールバック関数内に追加して保存します。

$(".kpi").empty();
$(".kpi").append(Math.round(reply.qHyperCube.qGrandTotalRow[0].qNum).toLocaleString());

image

「View」ボタンをクリックして、画面に以下の様な形でKPIオブジェクトが表示されることを確認します。

image

D3.jsを使った棒グラフの追加

次に、D3.jsを使って以下の様な棒グラフを追加したいと思います。ここでもKPI作成時と同様の形でHypercubeを作成します。その上でこのHypercubeから集計結果を取得し、コールバック関数の中でD3.jsを使って棒グラフを描画する処理を組み込みます。

image

Hypercubeの作成

右側メニューから「Hypercubes」タブを開き、「Add Hypercube」 ボタンをクリックします。

1

以下の通りに選択・入力を行って、「Add」をクリックします。ここでは、「Region」軸で「Sum([Sales Amount])」を集計し、「salesByRegion」という名称のコールバック関数を呼び出す設定を行っています。

3

MashupDemo.jsタブを開き、以下のコードが追加されたことを確認します。

image

image

チャートタイトルとSVGの追加

D3.jsを使って棒グラフの描画を行う領域をSVG(Scalable Vector Graphics)のタグを使って作成します。

MashupDemo.htmlタブを開き、以下のコードをContainerセクションの以下の個所に追加します。

<div class="chart-title">Sales by Region</div>
<svg id="barchart"></svg>

image

基本的な棒グラフの描画

MashupDemo.jsタブを開いて「require( [“js/qlik”], function ( qlik ) {」の行を見つます。その上でその行を以下の様に修正してD3.jsへの参照を追加します。

require( ["js/qlik", "//d3js.org/d3.v3.min.js"], function ( qlik ) {

image

以下のコードを「salesByRegsion」コールバック関数内に追加します。ここでは、まずドロップダウンの一覧の表示をクリアする処理を行います。

// reset the display of bar chart
$("#barchart").empty();

image

「salesByRegsion」コールバック関数内の後尾に以下のコードを追加します。「Region」フィールドと「Sum([Sales Amount])」メジャーのそれぞれの値はqHyperCube.qDataPages[0].qMatrixのqTextとqNumに格納されています。ここではそれらをunderscore.jsのmap関数を使ってdata配列に格納する処理を行います。

// get qMatrix data array
var qMatrix = reply.qHyperCube.qDataPages[0].qMatrix;
       
// create a new array that contains rows in the qMatrix
var data = qMatrix.map(function(d) {
  return {
      "Dimension1":d[0].qText,
      "Measure1":d[1].qNum,
  }
});

さらに以下のコードを下に追加します。これらの処理で、「Sum([Sales Amount])」メジャーの値を格納するvalues配列と、「Region」フィールド軸の値を格納するlabels配列を作成します。

// create a new array that contains "Measure1" for processing in D3.js
var values = [];
for(var i=0; i<data.length; i++) {
  values.push(data[i]['Measure1']);
}
 
// create a new array that contains "Dimensions1" for processing in D3.js
var labels = [];
for(var i=0; i<data.length; i++) {
  labels.push(data[i]['Dimension1']);
}

以下のコードを下に追加します。これらはD3.jsを使った処理で、先ほど作成したSVG要素を描画する領域として指定し、上記で作成した「Sum([Sales Amount])」メジャーの値を格納するvalues配列をチャート描画に利用するデータセットとして指定しています。

// select svg element and set dataset
var barElements = d3.select("#barchart")
  .selectAll("rect")
  .data(values)

棒グラフの棒を描画するための以下のD3.jsコードを下に追加します。

// add a bar chart
barElements.enter()
  .append("rect")
  .attr("x", 100)
  .attr("y", function(d,i){
    return i * 25;
  })
  .attr("height", "20px")
  .attr("width", 0)
  .transition()      
  .attr("width", function(d,i){
    return Math.round(d)/100000 + "px";
  })

棒グラフの左側にラベルを表示するための以下のD3.jsコードを下に追加します。

// add labels to the bar chart
barElements.enter()
  .append("text")
  .attr("class", "barLabel")
  .attr("x", 0)
  .attr("y", function(d,i){
    return i * 25 + 15;
  })
  .text(function(d,i){
    return labels[i];
  })

「View」ボタンをクリックして、画面に以下の様な形で棒グラフが表示されることを確認します。

image

棒グラフのデザインの修正

棒グラフの色が黒になっていますので水色に変更し、グラフの配置を調整します。

MashupDemo.cssタブを開き、以下のCSSコードを追加します。

.chart-title {
  color: #526B80;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
  padding-top: 10px;
}
#barchart {
  margin: 50px;
  width: 500px;
  height: 300px;
}
#barchart rect {
  fill: rgb(135, 206, 235);
}
.barText {
  font-size: 8pt;
}

image

「View」ボタンをクリックして、画面に以下の様な形で棒グラフが表示されることを確認します。

image

値ラベルの追加

現状ではグラフから数値が判別できない状況となっていますので、棒グラフの各棒の右側に値ラベルを追加します。

MashupDemo.jsを開き、以下のコードを「salesByRegsion」コールバック関数内の一番下に追加します。

// add value labels
barElements.enter()
  .append("text")
  .attr("class", "barText")
.attr("x", function(d, i){
  return 100 + 5 + (Math.round(d)/100000);
})
  .attr("y", function(d,i){
      return i * 25 + 15;
  })
  .text(function(d,i){
    return "$"+ Math.round(d).toLocaleString();
  })

「View」ボタンをクリックして、画面に以下の様な形で棒グラフが表示されることを確認します。

image

棒グラフへのクリックアクションの追加

棒グラフへのクリックアクションを追加し、棒をクリックした時にクリックした「Region」が選択される操作を行えるようにします。

MashupDemo.jsを開き、以下のコードを「salesByRegsion」コールバック関数内の以下の位置に追加します。(追加する位置に注意して下さい。)

  .attr("dim1", function(d, i){
    return labels[i];
  })
  .on("click", function(){         
        var dim1 = d3.select(this).attr("dim1")
      var arr = [];
      arr.push(dim1);
        app.field("Region").selectValues(arr, true, true);
    })

image

「View」ボタンをクリックして、棒グラフをクリックすると選択処理が実行されることを確認します。

image

まとめ

以上、2回にわたってD3.jsやBootstrapなどのライブラリを利用した、Qlik Sense Mashupの開発方法をご説明してきました。フィールド選択を行うドロップダウン、選択解除のボタン、KPIパネル、棒グラフの追加方法をご説明してきましたが、これらの手順を繰り返すことで以下の様な形のサイトを作成することができます。

image