Visualization API

Loading on the fly extensions and using the visualization api to display them

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>

CSS

.qvobject {
  padding: 0 20px;
}

#currsel {
  width: 100%;
}

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

JavaScript

var config = {
  host: 'branch.qlik.com',
  isSecure: true,
  prefix: '/anon/'
}

var extBase = 'https://rawgit.com/mindspank/mekko-chart/master/';
var qBase = 'https://branch.qlik.com/resources';

require.config({
  paths: {
    'qlik': 'https://branch.qlik.com/resources/js/qlik'
  },
  baseUrl: extBase
});
require(['mekko', 'require'], function(mekko) {
  require.config({
    baseUrl: qBase
  });
  require(['js/qlik'], function(qlik) {

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

		app.getObject('currsel', 'CurrentSelections');

    app.visualization.create('mekko', ['Dim1', 'Dim2', '=Sum(Expression1)'])
      .then(function(viz) {
        viz.show('chart')
      });

  });

});