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 Getting started building mashups.

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.

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

API reference

Visualization API: create method

Next step

You can now start exploring how to create different types of visualizations on the fly

Visualization types.

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.

Note: qlik-visual does not use Shadow DOM or HTML imports, therefore the polyfill for Shadow DOM does not work with Qlik Sense. Visit the webcomponents.org website for more information on browser compatibility and polyfills.

Do the following to install the web component polyfill.

  1. Open a browser window and navigate to http://webcomponents.org.
  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>

You must then configure Qlik Sense and connect to the Qlik Sense app containing the data you want to visualize. For more information, see Getting started building mashups.

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.

<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

Next step

You can now start exploring how to create different types of visualizations on the fly

Visualization types.

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?