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 www.playground.qlik.com 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.
Simply:
- Choose a sample data set from Playground and click "Try it out"
- Git clone or download the Capabilities API template from the "Templates" section.
- Navigate to the new folder and run 'npm install' from the command line. This will install needed modules for the project.
- 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= {
host:"playground.qlik.com",
prefix:"/playground/",
port:"443",
isSecure:true,
rejectUnauthorized:false,
apiKey:"[PERSONAL API KEY PROVIDED ON PAGE]",
appname:"[YOUR CHOSEN APP’S NAME]"
};
This code contains your API keys and application names.
- Run 'node index' in the command line. You'll see this message: listening on port 8000. Your server is now running.
- 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
Example:
app.visualization.create('barchart', ['Month', '=Count(Day)']).then(function(vis){
vis.show("myElementId")
});
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.
