Qlik Sense Mashup - Changing Chart Dimension on the fly

[Yianni_Ververis]

There are cases where we need to switch among charts in a mashup. The easiest way is with jQuery show/hide or if you are using Angular then show the chart based on the model value.

But what about if we have many charts, with the same measures but only the dimensions change? What if we could just change the dimension in the engine and let the engine take care of all the changes and animations?

This is possible through the Visualization API and the applyPatches() method.

Here I will explain how to create a simple dropdown that changes based on the dimension selected. Since I am using Angularjs 1.5.8 like Qlik Sense September 2017, I have created a component that

a) gets first object,

b) populates a dropdown with titles and

c) upon change, the chart is changing based on the dimension provided

First, we get the first object as usual and display it in our mashup. This is what the html looks like

<sense-object-multi-dropdown

                qvid="'BRjnYJ'"

                height="300"

                data="[

                    {title:'Total Costs by Branch', dimension:'Branch'},

                    {title:'Total Costs by Work Center', dimension:'Work Center Name'},

                    {title:'Total Costs by Division', dimension:'Division'},

                    {title:'Total Costs by Collection', dimension:'Collection'}

                ]"

            ></sense-object-multi-dropdown>

Here, in the "qvid" is the id (BRjnYJ) of the first object. In the "data" we add the title as we want it to display in our dropdown and the actual dimension.

In our components's Javascript code, we get and then show the object as usual

qlik.app.visualization.get($ctrl.qvid).then(function (viz) {

        $ctrl.viz = viz;

        $ctrl.viz.show($element.find('#obj'))

        $element.find('.qv-object-header').remove();

    });

Here is the html code for the component

<div class="sense-object-multi-dropdown">

    <div class="v title-1">{{ $ctrl.currentData.title }}</div>

    <div class="dropdown">

        <a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            <i class="fa fa-chevron-down" aria-hidden="true"></i>

        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">

            <a class="dropdown-item" href ng-repeat="item in $ctrl.data" ng-click="$ctrl.change(item)">{{item.title}}</a>

        </div>

        </div>

    <div class="qvobject" id="obj" height="{{$ctrl.height}}"></div>

</div>

Now, by just this, the page should have a chart and a dropdown populated.

Now, let's add the code that will change the dimension

    $ctrl.change = function(item) {

        $ctrl.currentData = item;

        $ctrl.viz.model.applyPatches([{

            qOp: "replace",

            qPath: "/qHyperCubeDef/qDimensions/0/qDef/qFieldDefs/0",

             qValue: `\"${$ctrl.currentData.dimension}\"`

  }], true);

    }

Here we are telling the engine that, hey for this object (model), replace the first field (qFieldDefs) of the first dimension (qDimensions) to the one I am giving you.

That's it. Once the engine receives the new change via websocket, it will redraw automatically, without any flickering and it will animate from one chart to the next.

Attached is my entire component if you want to use it in your Angular apps. Feel free to remove all the unnecessary libraries to make it work.

Live example: Plant Operations "Total Costs by Division"

Yianni

senseObjectMultiDropdown.zip