Skip to main content
Announcements
Qlik Community Office Hours, March 20th. Former Talend Community users, ask your questions live. SIGN UP
Francis_Kabinoff
Former Employee
Former Employee

So you're interested in building custom charts in Qlik Sense mashups but don't know where to begin? Let's walk through building one.

The basic flow of building a custom chart goes like this -

1. Get a hypercube

2. Format data as needed

3. Draw or update chart

STEP 1 - GET A HYPERCUBE

We will use the Qlik Dev Hub to make creating our hypercube easier (information on the dev hub here). Open the dev hub and create a new mashup using whichever template you'd like (I chose the grid template). Now, choose an app from the dropdown near the top left of the edit window.

2015-11-25 12_17_31-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

Now, let's create the hypercube. Click the 'Add hypercube' button in the top right of the editor window, and a dialog will popup. Choose the dimension(s) and measure(s) you will need to create your chart. Set the rows to the number of rows of data you would like to include in your chart, and enter a name for a callback function. Then click 'Add'.

2015-11-25 12_26_08-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

Now a method to create a hypercube, and the callback function will have been added to your .js file. I chose to add a hypercube using the 'Month' field as a dimension and the 'Margin Amount' measure as my measure, using the Consumer_Sales app. If you want to follow along with me exactly, and recreate the "Margin Amount Over Time" chart from the Consumer_Sales app, you will have to manually edit the hypercube that has been generated a tiny bit. By default, a hypercube sorts the data by the load order of the first column, usually your first dimension. In order for months to be in the correct order in the data I will get back from my hypercube, I can sort the "Month" dimension numerically. The picture below shows the code I added to my hypercube, and you can check out all the properties that can be set on a hypercube here.

2015-11-25 12_41_05-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

STEP 2 - FORMAT DATA

The callback function you specified while creating the hypercube will be called when the data for the hypercube is returned from the engine, and every time the data in the hypercube changes. I like to log the reply as a first step, just to make sure my data is coming through correctly, and check out what it looks like.

2015-11-25 12_48_02-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

In the console, you can then check out the reply you get. Now, you'll want to figure out how you can format the data in the reply to use in creating your chart. Obviously, this is dependent on how you'll be creating your chart. For this example, I've chosen to use c3.js, but there's a good number of interesting and useful javascript charting libraries, any of which you can make use of.

An example of a c3.js line chart can be found here. Now that I know what my data basically needs to look like, I can format it. Below is a screenshot of the code I used to format the data.

2015-11-25 12_59_59-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

STEP 3 - DRAW OR UPDATE THE CHART

Now that I have created a hypercube, and formatted the data, I need to actually draw the chart, and handle any time the data is updated. How you accomplish this can vary wildly. For instance, you could create a chart each time the data is loaded or changed. This would look something like creating the chart and appending it to a dom element, and every time data is updated, clear the dom element and recreate the chart and append it to the dom element again. I usually prefer to only create the chart once, and then just update the chart, if possible. With c3.js, this is very easy as it has a built in method for simply updating data on an existing chart. That means the only thing I really have to worry about is to check and see if the chart exists yet, and if it does not then create the chart, and if it does then just update the data. That looks like this -

2015-11-25 13_16_37-Mashup editor _ Developer Hub - DevHub.ProductQlikSense.png

SUMMARY

We created a hypercube, and then in the callback function for the hypercube, which gets called every time the data in the hypercube loads or changes, we formatted the data into a usable format for our chart, and then either drew the chart or updated the chart based on whether it already existed. Read through again, check out the full project, attached, and also live at http://webapps.qlik.com/c3-chart-example/c3-charts.html and let me know if you have any questions.

4 Comments