Visualization API

qlik.app.visualization

The Visualization API is the external interface to Qlik Sense visualizations. You can create new visualizations on the fly based on a session object. These visualizations are not persisted in the app. You can also fetch already existing visualizations from an app using the Visualization API.

Version history

Each method and property contain information around when it was introduced, updated, deprecated or removed. A list of all relevant API changes per version release can be found in API version history.

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.

Getting started building mashups.

Creating visualizations on the fly.

Examples of use

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

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',
  [
    "NetScoreName",
    "=Count(NetScoreName)"
  ],
  {
    "showTitles": true,
    "title": "Net scores"
  }
).then(function(vis){
  vis.show("QV01");
});

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 ( linechart ) {
  linechart.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" );
} );