Visualization API - create bar chart

Create on the fly and embed a simple bar chart in Qlik Sense

by Martijn Biesbroek

HTML

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

CSS

#placeholder {
  margin-top: 0px;
  width: 100vw;
  height: 100vh;
}

JavaScript

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

// Configure require config
require.config( {
	baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources"
} );

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

  var app = qlik.openApp('2d7f1f2f-bc62-410a-b12e-33bf9fe4a85e', config);
	
app.visualization.create('barchart',["Country","=count(Customer)"],
	{"title":"On the fly barchart"}
).then(function(vis){
	vis.show("placeholder");
	});


});