Step1 – Creating a basic D3 chart

Hopefully you have read the first post in this series which introduces you to the extension template, and suggests some pre-reading before you try and dive in to creating an extension.

Have a read here: http://qlikanddirty.com/2016/08/25/22/

Right so let’s get on to the interesting stuff

I’m going to assume that you are using my template and only changing the name and the code between the big markers to show you where to put your code. I am also assuming that you’ve run through the examples on the QlikFix so you know how to load and run extensions etc.

Setup

• Run the template.qar (did you know its just a zip with the extension renamed to .qar?) to export it to your extension folder, then just make a copy of the folder. Lets call it “01 A Basic Chart” for now but really you can call it what you want.

• Open up the Definition xml and give it this description and remove any code we don’t need in this case. You can just comment lines out that we don’t need, in this case pretty much everything.

<?xml version="1.0" encoding="utf-8"?>
<ExtensionObject Label="01 A Basic Chart" Description="First Chart Extension" PageHeight="50000">
  <!--<Dimension Label="Dimension 1" Initial="Path" TargetName="Dimension Name" />-->
    <!--<Dimension Label="Dimension 2" Initial="Measure" TargetName="Dimension Name" />-->
  <!--<Measurement Label="Measure 1" Initial="Sum(Measure)"/>-->
  <!--Text Label="Text Box 1" Type="text" Expression="TITLE"/>-->
    <!--Text Label="Checkbox 1" Type="checkbox" Initial="" />-->
    <!--Text Label="selectBox 1" Type="select" Select="select1,select2,select3" SelectLabel="selectL1,selectL2,selectL3" Expression="selectL3"/>-->
    <Initiate Name="Chart.Title" value="01 A Basic Chart" />
  <Initiate Name="Caption.Text" Value="01 A Basic Chart" />
  </ExtensionObject>

• Open up script.js and change the name variable at the top.

Quick Start

OK so that is the setup so let’s get our hands dirty starting with a really simple chart that just displays some static figures.

Here is the code we’re doing to use to create the chart, you can just copy and paste this in if you like and we’ll go through it in more detail below.

Copy and paste all of this code into the section in the template script.js which is marked at the place to put your extension code

_this.Element.innerHTML= '<svg class="chart"></svg>';
 
  var data = [4, 8, 15, 16, 23, 42];
  var width = 420,
  barHeight = 20;
 
  var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, width]);
 
  var chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);
 
  var bar = chart.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
 
  bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight-1);
 
  bar.append("text")
  .attr("x", function(d) { return x(d); })
  .attr("y",(barHeight-1)  / 2)
  .attr("dy", ".35em")
  .text(function(d) { return d; });

And that is it, if you open up a new Qvw, switch on web view and add your extension object
you should have a simple if rather horrendous looking chart

qlik3

Code in Detail

So to break the code down in to more manageable chunks (and remember I have no prior JavaScript training here so my explanations might be basic)

Basic Setup

You should be comfortable with the innerHTML from Barry’s examples, here we’re just telling it we are adding an svg with the class of chart:

_this.Element.innerHTML= '<svg class="chart"></svg>';

Here we’re just adding some really basic data into an array called ‘data’

var data = [4, 8, 15, 16, 23, 42];

Then just setting up a couple of display elements, so the width of the chart and the height of the bars

  var width = 420,
  barHeight = 20;

Set up our data range

Now we can get into the fun D3 stuff, the first thing to do is to scale our chart. D3 has a very clever way of taking a ‘domain’ and scaling it to a ‘range’ and I recommend having a read of this: d3: scales, and color. | Jerome Cukier

All we are doing here is telling D3 we’re going to make a linear scale and then how we want to convert our domain (in this case our data variable) into the range (the size of the chart). With a bar chart it’s likely we will want to start the scale at 0 so we can hard code this, and the outer is just the max of our dataset for which we can use the handy d3.max function. Then we just tell it the ‘range’ we want to map to, in this case hard coded at 0 again and then the outer edge is the width of our chart.

  var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, width]);

Add a chart

The next step is to add our chart object which is very straight forward code which shouldn’t need any explanation, the only point to note is that “chart” is the class we called in our svg html in the first line.

  var chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);

Set up the bars

The next step is to create our bar data which make up the chart. When working with D3 you will see the “g” reference a lot, but this is actually svg code and to understand it and why we use “transform” then have a read here: https://www.dashingd3js.com/svg-group-element-and-d3js

What this is basically saying is
1- declare a variable bar and make it our group of data
2- For each item of data add a bar into the group
3- Set the “location” property to be starting at 0 (left) and then the index number * bar height down (From top left)

So this gives us where on the x axis the bars will start (0) and then where on the y axis they will start (depends on the bar number)

  var bar = chart.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

You can read more about the function(d,i) in the d3 api documentation but in summary: “If value is a constant, then all elements are given the same attribute value; otherwise, if value is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element.”

Draw the bar rectangles

Then we just need to make the data visible! We do this by making the bar using a rectangle. Again this code is pretty straight forward, basically make me a rectangle with a width equivalent to our x variable (which is the ‘range’ we created from our ‘domain’) and give it a fixed height as we set earlier, but take one off the height which gives us the spacing between the bars.

  bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight-1);

Add some text to the bars
The final step is to add our text to display the value, this code looks a little bit more complex but is actually very straight forward. Again we’re just appending (adding) something to our bar objects, in this case some text. We then just set the attributes of the text so
1- Append our text to the bar
2- Give it an x co-ordinate, in this case we want to offset it to the end of the bar so we need to return the length of the data ( x ) which we set earlier.
3- Give it a y attribute which in this case is the bar height less our spacer all decided by two, which is the centre of the bar
4- Then we want to make sure that the element stays centred no matter what font size we use and also makes sure if we apply any rotation, it rotates around the centre of the text rather than the bottom, so we use the svg dy attribute to do this (just accept this works!)
5- Finally we need to tell our text what to say, which in this case is simply our data value

  bar.append("text")
  .attr("x", function(d) { return x(d); })
  .attr("y",(barHeight-1)  / 2)
  .attr("dy", ".35em")
  .text(function(d) { return d; });

Wrap Up

So you can see that it is actually pretty straight forward to add a chart in to Qlikview. However in this case all we’re basically doing is using Qlikview as a ‘browser’ to display our chart.
So what if we want to start using the power of Qlik and actually use some data and interact with the dashboard? Let’s cover that off in the next couple of chapters.

References

 

Qlikview extension template by bmz‌ on https://community.qlik.com/docs/DOC-3742

Extension tutorials by barryharmsen on QlikView Extension tutorials, documentation and examples – The Qlik Fix! The Qlik Fix!

Extension tips and tricks by dgudkov‌ BI Review: Building extensions in QlikView: some hints & tips

Notepad++ https://notepad-plus-plus.org/download/v6.9.2.html

D3 Formatting http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

http://www.d3noob.org/2012/12/setting-scales-domains-and-ranges-in.html

A little note on G in svg http://tutorials.jenkov.com/svg/g-element.html‌ and SVG Group Element and D3.js | DashingD3js.com

D3 basic bar chart https://bost.ocks.org/mike/bar/

Qlikview SDK QlikView Version 11 SDK | Qlik Community

Basic D3 bar by ajlandry‌ GitHub – wallyflops/d3Graph: Trying to get d3.js working in a QV extension (any graph can be added on later, in theory)

D3 API Documentation d3/API.md at master · d3/d3 · GitHub

 

Supporting Files

Please note that you will need to change the extension from .zip to .qar to get them to auto install in the correct directory

_Adams Template File

01 A Basic Chart

Leave a Reply