English Qlik Sense Developers 2.2

Visualization API

qlik.app.visualization

The visualization interface is the external interface to Qlik Sense visualizations. It allows developers to get visualizations defined in an app and to create temporary visualizations on the fly.

Since:
  • 2.2

Getting started

To use the Visualization API in mashups, you should first create a mashup as described in Getting started building mashups. You do not need to place any existing visualizations in your mashup, they will be created using the Visualization API, but you need to create the HTML page, configure Qlik Sense and connect to the Qlik Sense app.

See: Getting started building mashups.

Examples

Learn how to create visualizations on the fly using the Visualization API.

All the examples in this section are making use of the Helpdesk Management demo app.

Creating basic visualizations

Learn how to create basic visualizations using the Visualization API.

Bar chart with custom title

This example creates a bar chart with one dimension, one measure and a custom title.

app.visualization.create('barchart',["Case Owner Group","=Avg([Case Duration Time])"],
	{"title":"On the fly barchart"}
).then(function(vis){
	vis.show("QV03");
	});

Toolbar extension with three buttons

This example creates a visualization using the toolbar extension example, enabling the buttons for Clear all, Back and Forward.

app.visualization.create('com-qliktech-toolbar', null,
	{"buttons":{"clear":true,"back":true,"forward":true}}
).then(function(vis){
	vis.show("QV05");
});

Bar chart with general properties

This example creates a bar chart with one dimension, one measure and definitions for title, subtitle and footnote.

app.visualization.create( 'barchart',
	["Case Owner Group", "=Avg([Case Duration Time])"],
	{"title": "My title", "subtitle": "My subtitle", "footnote": "My footnote"}
).then( function ( visual ) {
	visual.show( 'QV01' );
} );

Creating visualizations with colors and legends

Learn how to create visualizations with definitions for colors and legends using the Visualization API.

Creating a line chart with single color

This example creates a line chart with one dimension, one measure and definitions for single color.

app.visualization.create( 'linechart',
	["Date", "=Avg([Case Duration Time])"],
	{"color": {"auto": false, "singleColor": 7}}
).then( function ( barchart ) {
	barchart.show( 'QV02' );
} );

Creating a line chart with color by measure

This example creates a line chart with one dimension, one measure and definition for color by measure (sequential, classes).

app.visualization.create( 'linechart',
	["Date", "=Avg([Case Duration Time])"],
	{"color": {"auto": false, "mode": "byMeasure", "measureScheme": "sc" }}
).then( function ( visual ) {
	visual.show( 'QV04' );
} );

Creating a line chart with labels

This example creates a line chart with one dimension, one measure and definitions for labels placement for the dimension and measure.

app.visualization.create( 'linechart',
	["Date", "=Avg([Case Duration Time])"],
	{
		"lineType": "area",
		"nullMode": "connect",
		"dataPoint": { "show": true, "showLabels": true }
	}
).then( function ( visual ) {
	visual.show( 'QV01' );
} );