Step2- Linking your D3 chart to Qlikview Data

Setup

• In this case I would just copy the folder we used in the above example and rename it. Lets call it “02 Linked to Data”

• Open up the Definition xml and give it this description plus in this case we will need to open up one dimension and one measure so we can tell the chart how it should link to the data in qlik.

<!--?xml version="1.0" encoding="utf-8"?-->
<!--?xml version="1.0" encoding="utf-8"?-->
 
 
    <!--<Dimension Label="Dimension 2" Initial="Measure" TargetName="Dimension Name" />-->
 
	<!--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"/>-->

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

• Finally we need to create a qvw with some data in it to work with, I just use this really simple code to create a dummy dataset. Obviously we need to have an idea of the data we want to use before creating the extension.

This is a simple bit of Qlikview script you can use to make up some data for the example:

test:
load weekDay(round(rand()*7)) as weekday,
and()*100 as value, 1 as rowcounter
autogenerate(10);

Quick Start

Here is the code for this section, I have made comments where necessary

_this.Element.innerHTML= '';
 
//**********************add this section here
var data = [];
var textarray = [];
var dataarray = [];
 
for (var f=0; f &lt; _this.Data.Rows.length; f++ ) {
var row = _this.Data.Rows[f];
 
//Dimension 1 : Defined in the Definition.xml
var dim1 = row[0].text;
 
//measure 1 : Defined in the Definition.xml
var measure1 = row[1].text;
 
textarray = textarray.concat(dim1);
dataarray = dataarray.concat(measure1);
}
 
//**********************finish add section
 
//var data = [4, 8, 15, 16, 23, 42]; //data array commented out
 
var width = 420,
barHeight = 20;
 
var x = d3.scale.linear()
.domain([0, d3.max(dataarray)]) //change this to the data array
.range([0, width]);
 
var chart = d3.select(".chart")
.attr("width", width)
.attr("height", barHeight * dataarray.length); //change this to the data array
 
var bar = chart.selectAll("g")
.data(dataarray) //change this to the data array
.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; });

• open up a new Qvw, switch on web view and add your extension object

• remember to add in your dimension and measure to the chart properties in order to make the chart work properly

You should end up with something that looks roughly like this, obviously as we are using rand() the number of figures and bars will change.

qlik2

Code in Detail

All the code has really done is change the data array we are using to the Qlik one, which is defined by the properties you give the chart (e.g. dimension and expression to use).

The Qlik data array

Remember that the Qlik array lists the dimensions first and the measures second and also as you’d expect from Javascript, the array is zero based.

So assuming that we have one dimension and one measure the array would be:

dimension = row[0].text
measure = row[1].text

Two dimensions and one measure would be:

dimension1 = row[0].text
dimension2 = row[1].text
measure = row[2].text

Basic setup

The first thing we need to do is add a blank array for our data and then two more arrays, one for the values and one for the dimension

var data = [];
var textarray = [];
var dataarray = [];

Load the data

The next thing we do is set up a basic if loop (you will have done millions of these on code academy) to pull in the data, the syntax of which should be very familiar.
For each row, bring in the dimension and the measure and concatenate these to the text and data arrays, then loop to the next row until we have all the data.

for (var f=0; f &lt; _this.Data.Rows.length; f++ ) {
var row = _this.Data.Rows[f];
 
 
//Dimension 1 : Defined in the Definition.xml
var dim1 = row[0].text;
//measure 1 : Defined in the Definition.xml
var measure1 = row[1].text;
 
textarray = textarray.concat(dim1);
dataarray = dataarray.concat(measure1);
}

Tell the system to use the new data array

Now all we need to do is tell the extension to look at the dataarray array rather than the data array (should have picked better names) so we just need to comment out our original array and then switch data to dataarray where I have commented in the code.

That is all there is to it!

Files for this post

02 Linked to Data

Leave a Reply