Click here to Skip to main content
14,974,155 members
Articles / Database Development / Data Visualization
Posted 31 Oct 2016


1 bookmarked

Create and Embed Visualizations with just a few lines of code using Qlik Playground & the Visualization API

31 Oct 2016CPOL3 min read
In this showcase we’re going to show you just how easy it can be to create and embed a visualization using Qlik Playground and the Visualization API.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Who is Qlik?

In this showcase we’re going to show you just how easy it can be to create and embed a visualization using Qlik Playground and the Visualization API.

In order to do that we need to run through the simple steps it takes to get up and running with Playground.

If you’ve never worked with Qlik before, it's a data analytics and visualization software company employing extremely powerful technology for building visualizations, dashes and web apps that allow exploration and insight into data. Qlik has recently opened a free programming environment called ‘Qlik Playground’ where you can try out their capabilities. To follow this demo, you’ll need to begin by signing in to with either your GitHub login or an email address.

About the Visualization API

Playground’s Visualization API is part of a collection called the ‘Capability APIs’. These are JavaScript APIs that let you embed Qlik charts and visualizations into webpages. You can use the Visualization API to leverage the Qlik visualization library with just a couple of lines of code.

The visualizations in this library are fully interactive, so there’s no need to write any additional code. In the background, Qlik’s analytics engine takes care of maintaining the associations, state selections and data relationships for you. It does this all in memory, which makes it very quick.

Getting started

To get up and running, you can pull down a Capabilities API template from GitHub which lets you skip the usual authentication and connection steps. It also gives you a good start with html pages.

You'll need to have Node installed, and when you do you'll be able to have a project running on your local machine in 6 easy steps.


  1. Choose a sample data set from Playground and click "Try it out"
  2. Git clone or download the Capabilities API template from the "Templates" section.
  3. Navigate to the new folder and run 'npm install' from the command line. This will install needed modules for the project.
  4. Edit the script.js file in the resources directory. Replace the empty config variable at the top with the provided code which should look something like this:
    var config= { 
        appname:"[YOUR CHOSEN APP’S NAME]" 

    This code contains your API keys and application names.

  5. Run 'node index' in the command line. You'll see this message: listening on port 8000. Your server is now running.
  6. Open a browser and go to http://localhost:8000. You won’t see anything on the page (you haven’t built it yet, stay tuned), but the app is now running on your local machine.

The script.js file in the resources directory is also where you run the code for the visualization, which is outlined below. Open this file and start your coding beneath the line which reads

var app = qlik.openApp(config.appname, config);

Visualization API - create() method

To create a new visualization, we use the create method. The create() method accepts the following parameters -

  • type (string) - the type of visualization to display
    • barchart
    • Combochart
    • gauge
    • Kpi
    • Linechart
    • Piechart
    • Pivot-table
    • Scatterplot
    • Table
    • Treemap
  • columns (array) - a list of dimensions and measure definitions to use
  • options (object) - (optional) additional properties can also be set here

The create() method returns a promise which contains a single parameter of type QVisualization.

QVisualization has a show() method which is used to append the visualization to an HTML element on the page. The show() method accepts a single parameter -

  • element (element | string) - the HTML element or element Id


app.visualization.create('barchart', ['Month', '=Count(Day)']).then(function(vis){"myElementId")

Image 1

This small amount of code will magically create your new chart which will now appear on the capabilities template you’re running. Here is an example of your result: an interactive chart embedded with just a couple of lines of code.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Brian Munz
United States United States
Brian Munz is the Director of Developer Relations team at Qlik. Passionate and opinionated about innovation, the web, open source, music, most things.

Comments and Discussions

-- There are no messages in this forum --