Qlik Community

Ask a Question

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
Login changes complete, Login with email not username. READ DETAILS/WATCH VIDEO
Yianni_Ververis
Employee
Employee

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.

2017-10-12 10_41_09-Plant Operations.png

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

10 Comments
simondachstr
Luminary Alumni
Luminary Alumni

Nice one!

0 Likes
1,437 Views
arbernardez
Partner
Partner

Pretty cool!

0 Likes
1,437 Views
jdiaz
Partner
Partner

Great contribution!  If we could vote or "like" on the apps in Web Apps from Qlik Sense, you would have my vote for most useful app in .

BTW, I think it would be useful to have a search capability in the overall site.

0 Likes
1,437 Views
Yianni_Ververis
Employee
Employee

Excellent point jdiaz‌!

We actually have implemented this on Qlik Demos site using the Engine API!

YIanni

1,437 Views
jdiaz
Partner
Partner

I guess you are referring to the search capability in Qlik Demos - I just saw that (Excellent!).

It would also be useful to have the voting and search capabilities in the webapps.qlik.com site

Cheers,

--José

0 Likes
1,437 Views
bujnakbranislav
Partner
Partner

@jvs Great post and even better App.PlantOperations

In your first paragraph you mentioned jQuery show/hide is the easiest way to control which charts are being displayed. I see you have used angular ng-show/ng-hide

Would you have an example on jQuery show/hide? I am having problem to hide not selected charts and can't figure out what I am missing in my js.

Thanks,

Branislav

Thread to my issue: createCube, selection &amp; jQuery show()/hide()

0 Likes
1,437 Views
Yianni_Ververis
Employee
Employee

We have done it in the past but I cannot find the demo...

You can show hide div with jQuery and upon event completion, call the resize() method on the object and you should be fine

0 Likes
1,024 Views
bujnakbranislav
Partner
Partner

Yianni:

Thanks for the reply. I was able to figure out with @Erik Wetterberg‌'s help. I was missing class and hide method in my script. It's working now. Also wanted to ask you, because I am not clear about one thing. what are the criteria to chose between jQuery and AngualarJS when building custom interface. I know Qlik is built utilizing both JS, but not clear when to use which methods? Is there any documentation on this subject? I found similar question in the community:

https://community.qlikview.com/thread/287960

0 Likes
1,024 Views
Yianni_Ververis
Employee
Employee

jQuery is a library while Angular is a framework to build websites.

If you have a simple mashup, one page, couple of visualizations, then you can do it with just jQuery.

If you want to create a more complex mashup like a portal with lots of mashups/visualizations like

https://webapps.qlik.com/salesforce/index.html or

https://webapps.qlik.com/CIO/index.html

then its better if you use Angular, React, Vue etc

Best,

Yianni

0 Likes
1,024 Views
bujnakbranislav
Partner
Partner

Thanks for a quick explanation. I guess, I still have a lot to learn . I knew about jQuery being a library, but was not quite sure about AngularJS and was getting confused.

0 Likes
1,024 Views