Skip to main content Skip to complementary content

Visualization API

Information noteIf you are using Qlik Sense Business or Qlik Sense Enterprise SaaS, see the API documentation at the Qlik (Developer Portal).
Information noteSTABLE.
This API is reliable and breaking changes are unlikely.
Information note Embedded visualizations created with the Visualization API do not inherit all Qlik Sense capabilities, for example, the capability to create your own context menu.

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.

Version history
Version state Details
Introduced 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.

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" );
} );

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!