The Qlik Sense Mashup API (also known as Capabilities API or simply qlik.js) allows you to inject Qlik Sense charts with full interactivity into your web page with just a few lines of code. It also allows you to dynamically define hypercubes, lists or simple expressions, send them to Qlik calculation engine and get results back, so you can visualize the data yourself. If you use the APIs all this would be well known to you. But there is more.. Let’s have a look at some more advanced things you can do.
Show visualizations in a tab
Sometimes you want a user interface that is a bit more advanced than just showing visualizations when the page is loaded. For example you might want to show the visualization in a tab, something like this:
This examples uses jQuery tabs, but you could use any tabs implementation, the basic ideas are the same. What you need to do to make this work:
- when the user wants to add a new visualization, call the getObject method, with the html element and the id of the visualization as parameters
- when the user switches between tabs, you need to call the resize method, to make sure that the visualization displayed is updated.
A code example. Note that much of this is actually more jQuery than qlik, the only part that is really qlik is the two methods calls:
You’ll find a working example in the Github repository. Note that the key to this is only two calls:
- call getObject the first time the user wants to see a new chart, not when the page loads
- call resize whenever the user changes tabs