Using the Qlik Visualization API

Connecting to Qlik Sense and displaying fully interactive graphs based on Qlik data.

by Alexander Karlsson

HTML

<script src="https://branch.qlik.com/anon/resources/assets/external/requirejs/require.js"></script>
<link rel="stylesheet" href="https://branch.qlik.com/anon/resources/autogenerated/qlik-styles.css">
<div id="currsel"></div>
<div id="chart"></div>
<div id="chart2"></div>

CSS

.qvobject {
  padding: 0 20px;
}

#currsel {
  width: 100%;
}

#chart,
#chart2 {
  margin-top: 20px;
  width: 600px;
  height: 400px;
}

JavaScript

// Config object to tell Qlik API where to connect.
var config = {
  host: 'branch.qlik.com',
  isSecure: true,
  prefix: '/anon/'
};

// Configure require config
require.config({
  paths: {
    'qlik': 'https://branch.qlik.com/resources/js/qlik'
  },
  baseUrl: 'https://branch.qlik.com/resources'
});

require(['js/qlik'], function(qlik) {

  var app = qlik.openApp('e6c1e37c-38dd-4847-b8f6-2431405f7ab1', config);

  // Append a current selections bar
  app.getObject('currsel', 'CurrentSelections');

  // Create a bar chart
  app.visualization.create('barchart', null, {
      qHyperCubeDef: {
        qDimensions: [{
          qDef: {
            qFieldDefs: ['Dim1']
          }
        }],
        qMeasures: [{
          qDef: {
            qLabel: 'My Custom Label',
            qDef: '=Sum(Expression1)'
          }
        }],
        qInterColumnSortOrder: [1, 0]
      },
      title: 'This is my bar chart'
    })
    .then(function(barchart) {
      // Chart is been created, display it in element with id chart
      console.log(barchart.id)
      barchart.show('chart')
    });

  // Create a treemap
  app.visualization.create('treemap', ['Dim1', 'Dim2', '=Sum(Expression1)'], {
      title: 'This is my treemap'
    })
    .then(function(treemap) {
      // Chart is been created, display it in element with id chart
      treemap.show('chart2')
    });

});