UN was one of my most challenging projects in many aspects. This was not just a simple mashup or a simple webpage that uses the Capabilities Api and app.getObject() to display Qlik Sense objects. It was an entire solution that required many teams to be involved and share their expertise.

 

One of the most interesting problems I faced, was the structure of the qvf. In order for most of the charts to work, there had to be a group of selections made and in some cases, in a specific order.

 

For this example, I will talk about the chart on the Indicators page.

 

First we have to select the field "domain" and then get all of the available "Tier" in order to populate the drop down.

2017_01_06_11_22_06_UN_Gender_Statistics1.png

 

app.obj.app.field('DomainName').select([value], false, false)
.then(function(){
     me.getTier();
});



 

Then to get the HyperCube for the Field "Tier"

  me.getTier = function () {
       api.getFieldDataQ('Tier').then(function (data) {
          $scope.Tier = _.filter(data, function(obj){
          return (obj[0].qState!=='X' && obj[0].qState!=='L')?true:false;
     });
       $scope.selectTier($scope.Tier[0][0].qNum);
  });
  }

 

and populate the drop down with Angular's ng-repeat

<div class="dropdown" id="dropdownTier">
  <label>Select Tier:</label>
  <button class="btn btn-default dropdown-toggle btn-block text-left" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  {{selection.Tier}}
  <span class="caret pull-right"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownTier">
  <li ng-repeat="item in Tier" ng-class="(selection.Tier==item[0].qNum) ? 'active' : ''"><a ng-click="selectTier(item[0].qNum)">{{ item[0].qText }}</a></li>
  </ul>
  </div>

 

Like this

2017_01_06_11_45_52_UN_Gender_Statistics.png

Then we select the first one so get the the data from the field "seriesName" as indicators for only that tier

$scope.selectTier = function (value) {
  $scope.selection['Tier'] = value;
  app.obj.app.field('Tier').selectValues([value], false, false)
  .then(function(){
  me.getIndicator();
  })
  }

 

me.getIndicator = function () {
  api.getHyperCubeQ(['IndicatorID','SeriesName'],[]).then(function(data3){
  $scope.SeriesName = _.filter(data3, function(obj3){
  return (obj3[1].qState!=='X' && obj3[1].qState!=='L')?true:false;
  });
  if (!$scope.SeriesName.length) {
  $scope.selectionDisplay.SeriesName = "No Data";
  $scope.selection.SeriesName = null;
  } else {
                        $scope.selectIndicator($scope.SeriesName[0][0].qNum, $scope.SeriesName[0][1].qText);
  }
  })
  }

 

and populate the indicator drop down

  <div class="dropdown" id="dropdownSeriesName">
  <label>Select Indicator:</label>
  <button class="btn btn-default dropdown-toggle btn-block text-left" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  {{ selectionDisplay.SeriesName }}
  <span class="caret pull-right"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownSeriesName">
  <li ng-repeat="item in SeriesName" ng-class="(selection.SeriesName===item[1].qText) ? 'active' : ''"><a ng-click="selectIndicator(item[0].qNum, item[1].qText)"> {{ item[0].qText }}-{{ item[1].qText }}</a></li>
  </ul>
  </div>

 

Like this

2017_01_06_17_37_41_UN_Gender_Statistics.png

 

Last, select the indicator to get the final chart

2017_01_06_18_34_35_UN_Gender_Statistics.png

 

The entire thing takes about 3 seconds to load but there is no delay to the common user because while the selections are made the object is loading and the canvas is drawn.

 

The Angular Service Api that I use for HyperCubes is here

capabilities-api-angular-template/api.js at master · yianni-ververis/capabilities-api-angular-template · GitHub

 

URL: https://genderstats.un.org/#/indicators

 

Yianni