topic Re: Extensions Help - D3Js.org in QlikView

Extensions Help - D3Js.org

wandapec — Mon, 26 Jan 2026 16:26:21 GMT

Hi guys,

I recently decided to try get a better understanding of extensions and try to use some of the D3js.org stuff in my models. I have managed to get the basics of extensions sorted.

However, after going through all the training manuals and examples on the web, I think I am really close, but seem to be missing something and I really don’t know what. I have attached a link to the example I am working on - trying to get a basic Bar Chart working… Would someone be able to take a look and see where I am going wrong, please?

Thanks in advance.

Dropbox - barexample.zip

Re: Extensions Help - D3Js.org

wandapec — Fri, 15 Nov 2013 13:57:15 GMT

Pretty please....

Re: Extensions Help - D3Js.org

wandapec — Mon, 18 Nov 2013 18:45:34 GMT

//AJL: will need to make sure this is updated whenever the final extension is packaged. I.E. the folder name will need to be whatever the final product name will be

var extensionName = "barexample";

var extensionPath = Qva.Remote + "?public=only&name=Extensions/" + extensionName +"/";

function barexample_Init() {

var files = [];

//if Can't resolve jQuery, then load it

if (typeof jQuery == 'undefined') {

files.push(extensionPath + "jquery.js");

}

//Pushing js file names into files array

files.push(extensionPath + "json2.js");

files.push(extensionPath + "d3.v3.min.js");

//loading all the js files and then executing extension_Done

Qv.LoadExtensionScripts(files, barexample_Done);}

function barexample_Done() {

Qva.AddExtension(extensionName, function () {

Qva.LoadCSS(extensionPath + "style.css");

var _this = this;

// //get first text box

// //var text1 = _this.Layout.Text0.text;

// var text1 = _this.Layout.Text0.text.toString();

// //get check box value

// var checkbox1 = _this.Layout.Text1.text.toString();

// var select = _this.Layout.Text2.text.toString();

//add a unique name to the extension in order to prevent conflicts with other extensions.

//basically, take the object ID and add it to a DIV

var divName = _this.Layout.ObjectId.replace("\\", "_");

if(_this.Element.children.length == 0) {//if this div doesn't already exist, create a unique div with the divName

var ui = document.createElement("div");

ui.setAttribute("id", divName);

_this.Element.appendChild(ui);

} else {

//if it does exist, empty the div so we can fill it again

$("#" + divName).empty();

}

//ATN: The below 2 lines will show you a demo- writing HTML into the extension box.

//var html = "test html";

//$("#" + divName).html(html);

//Data Elements

var dataset = [];

var textset = [];

var data = _this.Data;

for (var f=0; f < data.Rows.length; f++ ) {

var row = data.Rows;

//Dimension 1 : Defined in the Definition.xml

var dim1 = row[0].text;

//Dimension 2 : Defined in the Definition.xml

var measure1 = row[1].text;

letter = textset.concat(dim1);

frequency = dataset.concat(measure1);

}

var margin = {top: 20, right: 20, bottom: 30, left: 40},

width = 960 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var x = d3.scale.ordinal()

.domain(data.map(function(d) { return d.letter; }))

.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()

.domain([0, d3.max(data, function(d) { return d.frequency; })])

.range([height, 0]);

var xAxis = d3.svg.axis()

.scale(x)

.orient("bottom");

var yAxis = d3.svg.axis()

.scale(y)

.orient("left")

.tickFormat(formatPercent);

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("transform", "rotate(-90)")

.attr("y", 6)

.attr("dy", ".71em")

.style("text-anchor", "end")

.text("Frequency");

svg.selectAll(".bar")

.data(data)

.enter().append("rect")

.attr("class", "bar")

.attr("x", function(d) { return x(d.letter); })

.attr("width", x.rangeBand())

.attr("y", function(d) { return y(d.frequency); })

.attr("height", function(d) { return height - y(d.frequency); });

function type(d) {

d.frequency = +d.frequency;

return d;

}

});

}

// Call the initialization function

barexample_Init();

Re: Extensions Help - D3Js.org

danielrozental — Mon, 18 Nov 2013 19:29:28 GMT

So Steve, did you get it to work?

Re: Extensions Help - D3Js.org

Clever_Anjos — Mon, 18 Nov 2013 19:30:04 GMT

This line is returning an error, check it

var x = d3.scale.ordinal()

.domain(data.map(function(d) { return d.letter; }))

.rangeRoundBands([0, width], .1);

Re: Extensions Help - D3Js.org

Clever_Anjos — Mon, 18 Nov 2013 19:33:15 GMT

I don´t know if this.Data exposes a "map" method,

Re: Extensions Help - D3Js.org

wandapec — Wed, 20 Nov 2013 07:37:25 GMT

Thanks Clever. I am not sure what to check or change... The original script to fetch the data was like this...

d3.tsv("data.tsv", type, function(error, data) { x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

That was to fetch data out of a .tsv file...

The d3 API says this...

# ordinal.range([values])

If values is specified, sets the output range of the ordinal scale to the specified array of values. The first element in the domain will be mapped to the first element in values, the second domain value to the second range value, and so on. If there are fewer elements in the range than in the domain, the scale will recycle values from the start of the range. If values is not specified, this method returns the current output range.

This method is intended for when the set of discrete output values is computed explicitly, such as a set of categorical colors. In other cases, such as determining the layout of an ordinal scatterplot or bar chart, you may find the rangePoints or rangeBands operators more convenient.

Re: Extensions Help - D3Js.org

wandapec — Wed, 20 Nov 2013 07:37:59 GMT

Not yet... Will keep you posted..

Re: Extensions Help - D3Js.org

danielrozental — Wed, 20 Nov 2013 14:02:43 GMT

Steve, Stefan Walther did a D3.js extension you should check it out.

Creating a QlikView Extension from Scratch using D3 (QlikTip #50)

Re: Extensions Help - D3Js.org

Thu, 21 Nov 2013 16:50:19 GMT

Hey Steve, I actually wrote the original d3Bar example and just pushed a revised version to GitHub (wallyflops/d3Graph · GitHub).

By looking at the code you posted, I can see that you are looping through and capturing information from _this.Data.Rows but you are never returning the data values to a parent object. Later on, when you are referencing "data" it is still set to the parent object of _this.Data, which the objects of letter or frequency would not exist.

To make it clearer, check this portion of my script: d3Graph/d3Bar/Script.js at master · wallyflops/d3Graph · GitHub

Re: Extensions Help - D3Js.org

Clever_Anjos — Sat, 23 Nov 2013 19:10:08 GMT

Do you have the original working version?

Re: Extensions Help - D3Js.org

Mon, 25 Nov 2013 13:37:48 GMT

Steve,

I think this is your issue

var data = _this.Data;

for (var f=0; f < data.Rows.length; f++ ) {

var row = data.Rows;

//Dimension 1 : Defined in the Definition.xml

var dim1 = row[0].text;

//Dimension 2 : Defined in the Definition.xml

var measure1 = row[1].text;

letter = textset.concat(dim1);

frequency = dataset.concat(measure1);

}

You are just looping through each Row and setting the vars: letter & frequency but never return the values to a parent object.

Whenever you reference the object data, you are referencing the original data object and not your new vars of letter & frequency.

Check out my other reply on this thread for additional detail.

Re: Extensions Help - D3Js.org

wandapec — Tue, 26 Nov 2013 06:58:26 GMT

Not a Qlikview one... I am trying to get this Bar Chart working in Qlikview to help me get a better understanding of using D3Js charts in Extensions...

In his version, he is getting the data out of a .tsv file. I am trying to get the data out of Qlikview.

d3.tsv("data.tsv", type, function(error, data) {

x.domain(data.map(function(d) { return d.letter; }));

y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

So I moved the .domain lines that he had in the above script to the relevant axis (x. and y.). I am not sure what to replace the data.map() with if that doesn't work in my version.

Re: Extensions Help - D3Js.org

wandapec — Tue, 26 Nov 2013 07:23:45 GMT

Thanks Andrew. I think I am really close. I used your version to get the data:

//Data Elements

var row, letter, frequency = 0;

var k, q;

var dataJson =[];

var data = _this.Data.Rows;

for (q = 0, k = _this.Data.Rows.length; q < k; q++) {

row = _this.Data.Rows;

dataDimension = row[0].text;

dataMeasure = parseFloat(row[1].text);

dataJson.push({

'letter':dataDimension,

'frequency':dataMeasure

});

}

As I mentioned earlier to Clever, I moved the .domain lines to the relevant axis (.x and .y) but I must be doing something wrong... and not sure what it is. The original script on the web used x.domain(data.map(function(d) { return d.letter; })); to get the 'letter' for the x. axis - maybe data.map() isn't correct?

Re: Re: Extensions Help - D3Js.org

wandapec — Thu, 28 Nov 2013 13:53:54 GMT

Hi guys,

I took Andrew's example and managed to get it working! Whoohoo... Thanks Andrew...

However, I am not sure what to do to get the chart to be interactive i.e. so that I can highlight and make selections on the chart that affects selections in the model. I have attached the .qar file of the version I have working so far....

Any ideas?

--------------------------

//AJL: will need to make sure this is updated whenever the final extension is packaged. I.E. the folder name will need to be whatever the final product name will be

var extensionName = "d3Bar";

var extensionPath = Qva.Remote + "?public=only&name=Extensions/" + extensionName +"/";

var loadPath = Qva.Remote + (Qva.Remote.indexOf('?') >= 0 ? '&' : '?') + 'public=only' + '&name=';

function Chart_Init(){

Qva.AddExtension('d3Bar', function () {

var jsFiles = [];

var _this = this;

_this.ExtSettings = {};

console.log(_this);

Qva.LoadCSS(loadPath + 'Extensions/d3Bar/css/style.css');

if(typeof jQuery == 'undefined'){

jsFiles.push('Extensions/d3Bar/js/jquery.js');

}

if (!Modernizr.svg) {

jsFiles.push('Extensions/d3Bar/js/r2d3.min.js');

} else {

jsFiles.push('Extensions/d3Bar/js/d3.min.js');

}

function InitSettings() {

_this.ExtSettings.UniqueID = _this.Layout.ObjectId.replace('\\', '_');

}

function Init(){

$(_this.Element).empty();

chartcontainer = document.createElement("div");

$(chartcontainer).attr('id','Chart_'+_this.ExtSettings.UniqueID)

.attr('class','chart')

.attr('width','100%')

.attr('height','100%')

$(_this.Element).append(chartcontainer);

}

function InitChart() {

var row, dataDimension, dataMeasure = 0;

var k, q;

var dataJson =[];

var data = _this.Data.Rows;

for (q = 0, k = _this.Data.Rows.length; q < k; q++) {

row = _this.Data.Rows;

dataDimension = row[0].text;

dataMeasure = parseFloat(row[1].text);

dataJson.push({

'id':dataDimension,

'data':dataMeasure

});

}

//--------------New Script Start-------------------------------

// Chart dimensions.

var spacer = { right: 20 };

var margin = { top: 30, right: 50, bottom: 50, left: 30 };

//{ top: 19.5, right: 19.5, bottom: 19.5, left: 39.5 },

var width = _this.GetWidth() - margin.right - spacer.right;

var height = _this.GetHeight() - margin.top - margin.bottom;

var x = d3.scale.ordinal()

.domain(dataJson.map(function(d) { return d.id; }))

.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()

.domain([0, d3.max(dataJson, function(d) { return d.data; })])

.range([height, 0]);

var xAxis = d3.svg.axis()

.scale(x)

.orient("bottom");

var yAxis = d3.svg.axis()

.scale(y)

.orient("left")

.ticks(10, "%");

var svg = d3.select('#Chart_'+_this.ExtSettings.UniqueID).append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")

.attr("class", "x axis")

.attr("transform", "translate(0," + height + ")")

.call(xAxis);

svg.append("g")

.attr("class", "y axis")

.call(yAxis)

.append("text")

.attr("transform", "rotate(-90)")

.attr("y", 6)

.attr("dy", ".71em")

.style("text-anchor", "end")

.text("Frequency");

svg.selectAll(".bar")

.data(dataJson)

.enter().append("rect")

.attr("class", "bar")

.attr("x", function(d) { return x(d.id); })

.attr("width", x.rangeBand())

.attr("y", function(d) { return y(d.data); })

.attr("height", function(d) { return height - y(d.data); });

function type(d) {

d.frequency = +d.frequency;

return d;

}

//--------------New Script End-------------------------------

}

Qv.LoadExtensionScripts(jsFiles, function () {

InitSettings();

Init();

InitChart();

});

}

console.log(extensionPath);

//Gotta load up the Modernizr library to see if the QV Desktop or browser can handle SVGs

//@todo AJL - Rework loading up the scripts

Qva.LoadScript(extensionPath + 'js/modernizr.svg.min.js', Chart_Init());

Re: Re: Re: Extensions Help - D3Js.org

wandapec — Mon, 02 Dec 2013 16:38:16 GMT

I have a feeling that I need to use... SelectTextsInColumn(Column, toggle, recordsToSelect)

Just not sure how to get the array into recordsToSelect by selecting bars on the chart.

Can someone help me? Please...

Re: Extensions Help - D3Js.org

Brian_Munz — Mon, 02 Dec 2013 16:47:18 GMT

Hi,

Your QAR isn't properly zipped. When you zip the extension folder you need to zip the whole folder, not the contents. As it is now, when you double click the QAR the extension doesn't install and your js and css directories are added to the root.

Re: Extensions Help - D3Js.org

Brian_Munz — Mon, 02 Dec 2013 17:11:16 GMT

To add clicking on the individual bars, you need to attach a click even to the cars. For the code you've posted here, you would change your bar code to this:

svg.selectAll(".bar").data(dataJson).enter().append("rect").attr("class", "bar").attr("x", function(d) {

return x(d.id);

}).attr("width", x.rangeBand()).attr("y", function(d) {

return y(d.data);

}).attr("height", function(d) {

return height - y(d.data);

}).on("click",function(d){

_this.Data.SelectTextsInColumn(0, false, d.id);

});

The new code is bolded. It takes the bar ID and selects it in QlikView. In order to allow the selection of multiple bars you'd need to code some sort of ability to select multiple bars like a select box, lasso, etc.

Re: Extensions Help - D3Js.org

wandapec — Tue, 03 Dec 2013 06:02:01 GMT

Oops. Thanks Brian.

Re: Extensions Help - D3Js.org

Thu, 05 Jun 2014 12:42:42 GMT

Hello Steve,

d3Bar.qar file which you have shared is not working on my desktop version, can you please share the latest .qar file

Thanks and Regards,

Preethi