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.
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'.
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.
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.
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.
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 -
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.