Creating visualizations on the fly

You can create visualizations on the fly using the Visualization API or the qlik-visual web-component.

Creating visualizations on the fly with the Visualization API

To utilize the Visualization API, you must first create a HTML page and configure Qlik Sense. For more information, see Building your first mashup with Qlik Sense Desktop or Qlik Sense Enterprise on Windows.

Then you must connect to the Qlik Sense app containing the data you want to visualize. This app can be an app physically stored on disk or an app created in the browser session, a so-called session app.

When you have connected to the app, you can start utilizing the Visualization API via the visualization.create method.

Example: basic bar chart

app.visualization.create(
  'barchart',
  [
    "NetScoreName",
    "=Count(NetScoreName)"
  ],
  {
    "showTitles": true,
    "title": "Net scores"
  }
).then(function(vis){
  vis.show("QV01");
});

API reference

Visualization API: create method

Creating visualizations on the fly with the qlik-visual web-component

You can also create a visualization on the fly using the qlik-visual web component.

Since qlik-visual is a custom web component, it needs browser support for custom elements through the document.registerElement function. This is included in some browsers (Google Chrome and Chrome Android) and is supported through polyfills for other browsers.

If you want to use qlik-visual in browsers that do not have built-in support for custom web components, you must download the webcomponents-lite.js polyfill and include it in your mashup before you load the Qlik Sense javascript. You must also load the Qlik CSS (qlik-styles.css) file for the web.

Do the following to install the web component polyfill.

1. Open a browser window and navigate to Webcomponents.
2. Download the polyfills.
3. Unzip the file and then copy webcomponents-lite.js to your extension folder.

4. Add the following line to the head section of your mashup's HTML file:

   <script type="text/javascript" src="[your path]/webcomponents-lite.js"></script>

Document.registerElement documentation

Webcomponents

You must then configure Qlik Sense and connect to the Qlik Sense app containing the data you want to visualize. For more information, see Building your first mashup with Qlik Sense Desktop or Qlik Sense Enterprise on Windows.

The app can be an app physically stored on disk or an app created in the browser session, a so-called session app.

When you have connected to the app, you can start utilizing qlik-visual.

Example: basic bar chart

<qlik-visual appid="Tutorial-Golf.qvf"
  type="barchart"
  cols='["NetScoreName","=Count(NetScoreName)"]'
  options='{
    "showTitles": true,
    "title": "Net scores"
  }' >
</qlik-visual>

API reference

Web component: qlik-visual