JavaScript Libraries for Qlik Sense Development

The next step to enhance our Qlik Sense extensions is to choose what javascript framework will we use.

There are a lot of javascript frameworks that allows us to build fancy charts in an easy manner.I will list some of them in the following list:

D3: This library is one of the most famous ones. It’s so customizable and give us a lot of different type of charts to make. It have a huge community with a really large list of examples.

ZingChart: Really good library with flat styled charts. The provided in the box charts are really simple to make. One of the contras is that there is no free version to download.

ElyChart: Another library to build charts with Javascript. The look and feel is not one of the good points but it is an alternative to take into account.

DC: Javascript library based on D3 with beautiful animations and charts.

Protovis: This Javascript Library is object oriented and have some example charts on the project page.

Dygraphs: Chart framework written in Javascript. Focused mainly on stock charts.

HighCharts: Good javascript library with a really nice help in the main page.Really fancy transitions and selections can be made.

FusionCharts: Excel like charts Javascript framework. This library have a loot of examples in the web page.


How to create extensions

These last days I noticed that there is a lack of visualizations and customizations in Qlik Sense.  We cannot even change the header colour on a simple table! This fact motivated me to find out how to build my own extensions.

As there is no documentation at all in this aspect, I had to follow a try and catch procedure to archive this “solution”. I had to search a loot to be able to build my first extension and now, I will explain how you can do it by yourself.

The extensions in Qlik Sense have to be developed with Java Script. The man advantage of this fact is that we can use whatever Java Script library to build our extensions. Qlik Sense includes the JQuery Library by default to make easier the process.

In order to build the first extensions, we should open Qlik Sense and then  go to Internet Explorer and type in the Navigation Bar the following http://localhost:4848/workbench/.

This link will open the IDE used by Qlik Sense to develop our extensions



Inside this IDE, we should press “New” in order to create our new extension. We will put a name to the extension and chose a template. This template will create the stub of the extensions, making easier the development. In this case we will chose the table template


Once the extension is created we may press edit to begin editing it.We will see that the extension have 3 main files: ExtensionDemo.Qetx, ExtensionDemo.js and style.css.

This first file contains a structure where we can define the main properties of our object, like the name or the icon that will be shown on Qlik Sense tool bar. In the second file (js) there is all the main code of our Extension ( we will see the code in detail in the next post ). Finally, on the css file we will have all the css style for our extension.


Now, if we go to Qlik Sense we will see on the leftmost bar our new extension. We should drag and drop it to the main pane an configure it normally. This time, as it is a simple table, we can put as many dimensions and expressions as we need.



On the next days I will be fully focused on the extensions topic so I will keep posting my findings to create some kind of documentation.