Visualization API

Selecting data points

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">
<button id="year">Select 2011-08</button>
<div id="chart"></div>

CSS

.qvobject {
  padding: 0 20px;
}

#currsel {
  width: 100%;
  margin-bottom: 20px;
}

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

JavaScript

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

var qBase = 'https://branch.qlik.com/resources';

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

require(['js/qlik', 'jquery'], function(qlik, $) {
	
  var app = qlik.openApp('d7b1f94e-749b-479a-9bad-fcb8fccda5dc', config);
	
  var yearmonth = app.field('YearMonth');
  
  app.visualization.create('barchart', ['Priority', '=Count(Distinct [%CaseId])'])
    .then(function(model) {
      model.show('chart');
    });
    
  $('#year').click(function() {
    yearmonth.selectMatch('201108', true);
  })

});