Qlik Mashup – Create charts on the fly using Qlik API

This blog is about creating dynamic charts using Qlik Visualization API. This will be useful in scenarios where you want to show different insights based on a condition.

Using this technique, you can create visualizations either using the master items (measures and dimensions) or your own dimension/ measure definition. Only the built-in visualization component has been tried. The entire example is available here

The example is built using the default Consumer Sales app and hence can be tested  directly in your local box.

The key to creating the dynamic visualization is to create the dynamic request object to be sent to the Qlik server. The API request consists of three parts.

1. Visualization Type (String)
2. Field List (Array of Fields (JSON))
3. Options (JSON)

While the Visualization type is straight forward, this example focuses on creating the Field Lists using custom formula or master items.

• Creating custom Dimension

The basic structure of custom dimension is here. The main field is the qDef Field. This example focused on creating this field. The structure is

var qDimDef=  {"qDef": {"qFieldDefs": [], "qFieldLabels": []}};

• Creating custom Measure

The basic structure of custom dimension is here. The main field is the qDef Field. This example focused on creating this field. The structure is

var qMeasureDef={"qDef": {"qDef": "", "qLabel": ""}};

• Using Master Dimension/ Measure

The basic structure of Master Dimension is as follows

var qMasterDimDef={"qLibraryId":"","qType":"dimension"};

The basic structure of Master Measure is as follows

var qMasterDimDef={"qLibraryId":"","qType":"measure"};

This example iterates through an array of Measures and Dimensions.

Based on the fields that are present in each dimension and measure json object, the respective structure is chosen.

The necessary fields are populated to the qDef object.

The qDef object is then pushed into the Field list array.

The options field is left empty and the default settings will be used. You can learn more about the options here

Then using the create method the chart is created as follows.

Hope you find it useful. Please leave a comment.