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

Extensionspt1-1

 

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

Extensionspt1-2

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.

Extensionspt1-3

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.

 

Extensionspt1-4

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.

Create ( and use ) a variable in Qlik Sense.

Lately I’m fighting more than usual with Qlik Sense. This is, basically because with every step I make I find a wall that prevents me from reaching my objectives. I think that the problem is that, from the begining he took Qlik Sense as the “new” version of Qlikview. This make us think that the new platform have some weaknesses respecting Qlikview 11 that does not compensate the innovations that Qlik Sense includes. However, we should think about Qlik Sense as a new independent platform focused on the final user and not on the Qlik developer. Qlik Sense gives to the final user the responsibility to create his own front end, focusing this way the developer on the back end ( scripting ).

On that note, one of the problems that we are finding then trying to link our back end with the front end, is the variable creation. hitherto, we simply declared the variable in the script and we could directly use it in the interface. We could even declare the variables in the front end.

If we want to do the same on Qlik Sense, we must know how Qlik Sense is working. The main idea is that the developers give to the final user a set of tools ( fields ) to play with. Qlik Sense provides the user with the capability to choose whichever field loaded in the script by default. We can also create what we call “Master Item”

NewMeasure

To do so, we should find the “Master items” located on the leftmost side of the screen. We will press the “Create new measure” option. In this screen, we can put an expression that could be either a calculation based on a field or a variable. In this case, we will put =var1 ( this variable must first be declared on the script ).Once we have created the “Master Item”, the user will be able to choose and use the variable in any chart or text box.NewMeasure2