Visualization API

Patching properties on the fly.

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>
<label for="dims">Dimensions</label>
<select id="dims">
  <option value="placeholder">Select a Dimension</option>
</select>
<label for="measures">Measures</label>
<select id="measures">
  <option value="placeholder">Select a Measure</option>
</select>
<div id="chart"></div>

CSS

.qvobject {
  padding: 0 20px;
}

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

#chart, #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('3f3a866b-238f-4d1a-8aeb-81e97756af7a', config);
  
  app.getObject('currsel', 'CurrentSelections');
  
  app.getList('DimensionList', function(dims) {

		$('#dims').append(dims.qDimensionList.qItems.map(function(d) {
     return $('<option />', {
	     	value: d.qInfo.qId,
  	    text: d.qData.title
     });
    }));
      
  });
  
  app.getList('MeasureList', function(measures) {
    $('#measures').append(measures.qMeasureList.qItems.map(function(d) {
     return $('<option />', {
    	 	value: d.qInfo.qId,
      	text: d.qData.title
     });
    }));
      
  });
  
  var barchart = app.visualization.create('barchart');
  barchart.then(function(model) { model.show('chart') });
  
  $('#dims, #measures').change(function(e) {
    var value = $(this).val();
    if(value === 'placeholder') return;
    
    barchart.then(function(model) {
      if(e.target.id === 'dims') {
        model.setOptions({
          "qHyperCubeDef/qDimensions": '[{ "qLibraryId": "' + value + '" }]'
        }).then(function() {
        	model.show('chart')
        })
      } else {
        model.setOptions({
          "qHyperCubeDef/qMeasures": '[{ "qLibraryId": "' + value + '" }]'
        }).then(function() {
        	model.show('chart')
        })      
      }
    })

  })

});