Skip to main content
Yianni_Ververis
Employee

There were numerous times that I was asked to show more than one chart in the same page. This tutorial will show you how to place two buttons which will toggle the visibility of certain graphs.

  • From the Mashup Editor create a new mashup and select the "Grid mashup template". This will add in your page Bootstrap which we will need for the buttons that will handle the toggling.

screen1.png

  • Then, select the "Helpdesk Management" and place the charts that you want to toggle onto the grid. I selected "Avg Case Resolution Time" and "Open Cases by Age".
  • If you want to preview your files in another tab outside of the Mashup editor, the url would be something like "http://localhost:4848/extensions/tutorial-toggle/tutorial-toggle.html".
  • You will see in your html the grid with rows and columns and your visualizations.

<div class="row">

  <div class="col-sm-6 qvplaceholder" id="QV01">

  </div>

  <div class="col-sm-6 qvplaceholder" id="QV02">

  </div>

  </div>

  <div class="row">

  <div class="col-sm-6 qvobject" id="QV03">

  </div>

  <div class="col-sm-6 qvobject" id="QV04">

  </div>

</div>

  • Make sure you remove the "qvplaceholder" from QV01 and QV02, otherwise you will have a lot of extra space between your buttons and the chart.

  • In your js file you will see the code that places the objects into the html grid. Just for now, we will place both of the objects. We only need their ids, so later on we will remove the second chart.

  //callbacks -- inserted here --

  //open apps -- inserted here --

  var app = qlik.openApp('Helpdesk Management.qvf', config);

  //get objects -- inserted here --

  app.getObject('QV04','a5e0f12c-38f5-4da9-8f3f-0e4566b28398');

  app.getObject('QV03','PAppmU');

  • Now, we will create 2 radio buttons that handle the toggling of the charts. In row 1 and column 1 we will add the following:

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-default active">

  Avg Case Resolution Time

  <input type="radio" id="chart" name="chart" value="PAppmU" checked="checked"/>

  </label>

  <label class="btn btn-default">

  Relative to Population

  <input type="radio" id="chart" name="chart" value="a5e0f12c-38f5-4da9-8f3f-0e4566b28398"/>

  </label>

  </div>

  • Now we can remove the second chart, 'QV04' from the JS file.
  • The final page should look like this

screen2.png

  • If you have time and you want to make this more visual appealing, you can add some transition effects like fading.
  • We will add the "$('#QV03').fadeOut" in the JS file. Once this is completely faded out, we will then replace the object and fade it back in.

$( document ).ready(function() {

  $("input[name='chart']").change(function(obj){

      $('#QV03').fadeOut('fast', function(){

      app.getObject('QV03',obj.target.value);

      $('#QV03').fadeIn('fast');

    });

  });

});

  • If for any reason the object does not show after hiding the first element, try to add qlik.resize and the id of the new object.

qlik.resize(obj.target.value)

Attached you will find all of the files. Just unzip and place into your "Documents\Qlik\Sense\Extensions" folder.

11 Comments
SreeniJD
Specialist
Specialist

Nice tutorial!

Sreeni

0 Likes
1,938 Views
prabhu0505
Specialist
Specialist

Hi jvs

How can i add this object on another QlikSense dashboard?

Thanks!

0 Likes
1,938 Views
Yianni_Ververis
Employee
Employee

Hello Saravana,

Do you mean in Qlik Sense? You would have to create an extension. This is only for a webpage using the Capabilities (Mashup) API

0 Likes
1,938 Views
prabhu0505
Specialist
Specialist

Got it. Since Qlik Sense product is evolving rapidly, got little confused looking at different screens/options. Thanks!!

0 Likes
1,938 Views
richbyard
Contributor III
Contributor III

Hi Yianni,

That's a great bit of functionality that we're missing in the Qlik Sense front end right now.. Any chance this could be built into an extension for Branch?

Cheers
Richard

0 Likes
1,938 Views
Yianni_Ververis
Employee
Employee

Hello Richard,

I am working on this, hopefully I will have it in branch soon!!

Best,

Yianni

0 Likes
1,938 Views
richbyard
Contributor III
Contributor III

That would be a great addition and let me know if I can do anything to assist (testing rather than coding)...

Thanks

Richard

Sent from my iPhone

0 Likes
1,546 Views
Anonymous
Not applicable

Well groovy.

Being new to QlikSense Mashups - only started looking at them last week - it took a few runs through your notes & example till I got the hang of it.  But now I have it sussed, it is great and I have taken it a tiny touch further than your example, with a single button toggling multiple visualizations.  Plus whacked in an iframe from Forecast.io for the weather forecast.

Also the first time I have used the Bootstrap framework, which I must say I am most impressed with.

0 Likes
1,546 Views
rbartley
Specialist II
Specialist II

Hi Yianni,

Thanks for this.  This works well for visualizations that are in the underlying Senseapp, but I am creating a number of visualizations on the fly using the create method of the Visualization API, so do you know how I can get the objectID of on-the-fly visualizations?

0 Likes
1,546 Views
rbartley
Specialist II
Specialist II

Yianni,

I managed to get this to work by creating the visualization on the radio button change event as follows:

"

$( document ).ready(function() {

    $("input[name='chart']").change(function(obj){

   

    $('#QV05').fadeOut('fast', function(){

        if(obj.target.value=="Chart1")

        {

        app.visualization.create('linechart',["Price Month","MS","=Avg([Price Eur 100KG])"],

            {

            "title":"Average price by Member State (€/100kg)"

            }

            ).then(function(vis){

                vis.show("QV05");

                });

           

        }   

        else

        {

           

        app.visualization.create('linechart',["EU Price Month","EU Price Product Name","=Avg([EU Price Eur 100KG])"],

                    {"title":"Average price by Product (€/100kg)"}

                ).then(function(vis){

                    vis.show("QV05");

                    });

           

        }

    $('#QV05').fadeIn('fast');

            });

        });

    });

"

However, I would still be interested to hear whether it is possible to get the objectid of an on-the-fly visualization.

0 Likes
1,546 Views