topic Re: Re: Re: Re: Extension Object integration in QlikView

Extension Object integration

Mon, 26 Jan 2026 16:26:21 GMT

http://bl.ocks.org/kerryrodden/7090426

Hello Everyone,

I am relatively new to JS and I have to integrate the graph shown in the link above, with Qlikview. I understand the basics of JS, CSS, Html etc and have also understood the sample ET-Hello World extension. I just cant figure out how to start with this assignment. The source code is there but bringing it into Qlikview as an integration object is my task. Can any one please help me out with the best way to go about it as right now I'm at square one. Any help or guidance would be tremendously appreciated

Thank you

Regards

Khan

Re: Extension Object integration

Mon, 16 Jun 2014 16:50:21 GMT

Guys, Anyone who can guide me a little bit with this? I would appreciate it greatly. Thanks.

Regards

Mohd

Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 17:18:35 GMT

Further reading D3 BulletChart / BulletGraph Extension

D3 integration with Qlikview.

Re: Extension Object integration

Mon, 16 Jun 2014 17:44:07 GMT

I am also having the same problem as khan. I want to create an extension object for an animated donut chart. I have the source code and I tried to create the java script file but I can't get any thing for dispaly, so I guess my java script is not correct. Can any one help me with that...????

Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 17:49:56 GMT

Please post your

script.js

definition.xml

other sources

I´m gonna check

Re: Extension Object integration

Mon, 16 Jun 2014 17:59:20 GMT

This is my Script.js file:

var AnimatedDonutChart_path = Qva.Remote + "?public=only&name=Extensions/Objects/AnimatedDonutChart/";

function Extension_Init()

{

// Use QlikView's method of loading other files needed by an extension. These files should be added to your extension .zip file (.qar)

if (typeof jQuery == 'undefined') {

Qva.LoadScript(AnimatedDonutChart_path + 'jquery.js', Extension_Done);

}

else {

Extension_Done();

}

//If more than one script is needed you can nest the calls to get them loaded in the correct order

//Qva.LoadScript(AnimatedDonutChart_path + "file1.js", function() {

//Qva.LoadScript(AnimatedDonutChart_path + "file2.js", AnimatedDonutChart_Done);

//});

Qva.LoadScript(AnimatedDonutChart_path + "d3_v3.js", function() {

});

}

function Extension_Done(){

//Add AnimatedDonutChart extension

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

//Load a CSS style sheet

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

var svg = d3.select("body")

.append("svg")

.append("g")

svg.append("g")

.attr("class", "slices");

svg.append("g")

.attr("class", "labels");

svg.append("g")

.attr("class", "lines");

var width = 960,

height = 450,

radius = Math.min(width, height) / 2;

var pie = d3.layout.pie()

.sort(null)

.value(function(d) {

return d.value;

});

var arc = d3.svg.arc()

.outerRadius(radius * 0.8)

.innerRadius(radius * 0.4);

var outerArc = d3.svg.arc()

.innerRadius(radius * 0.9)

.outerRadius(radius * 0.9);

svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var key = function(d){ return d.data.label; };

var color = d3.scale.ordinal()

.domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing", "elit", "sed", "do", "eiusmod", "tempor", "incididunt"])

.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

function randomData (){

var labels = color.domain();

return labels.map(function(label){

return { label: label, value: Math.random() }

});

}

change(randomData());

d3.select(".randomize")

.on("click", function(){

change(randomData());

});

function change(data) {

/* ------- PIE SLICES -------*/

var slice = svg.select(".slices").selectAll("path.slice")

.data(pie(data), key);

slice.enter()

.insert("path")

.style("fill", function(d) { return color(d.data.label); })

.attr("class", "slice");

slice

.transition().duration(1000)

.attrTween("d", function(d) {

this._current = this._current || d;

var interpolate = d3.interpolate(this._current, d);

this._current = interpolate(0);

return function(t) {

return arc(interpolate(t));

};

})

slice.exit()

.remove();

/* ------- TEXT LABELS -------*/

var text = svg.select(".labels").selectAll("text")

.data(pie(data), key);

text.enter()

.append("text")

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

.text(function(d) {

return d.data.label;

});

function midAngle(d){

return d.startAngle + (d.endAngle - d.startAngle)/2;

}

text.transition().duration(1000)

.attrTween("transform", function(d) {

this._current = this._current || d;

var interpolate = d3.interpolate(this._current, d);

this._current = interpolate(0);

return function(t) {

var d2 = interpolate(t);

var pos = outerArc.centroid(d2);

pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1);

return "translate("+ pos +")";

};

})

.styleTween("text-anchor", function(d){

this._current = this._current || d;

var interpolate = d3.interpolate(this._current, d);

this._current = interpolate(0);

return function(t) {

var d2 = interpolate(t);

return midAngle(d2) < Math.PI ? "start":"end";

};

});

text.exit()

.remove();

/* ------- SLICE TO TEXT POLYLINES -------*/

var polyline = svg.select(".lines").selectAll("polyline")

.data(pie(data), key);

polyline.enter()

.append("polyline");

polyline.transition().duration(1000)

.attrTween("points", function(d){

this._current = this._current || d;

var interpolate = d3.interpolate(this._current, d);

this._current = interpolate(0);

return function(t) {

var d2 = interpolate(t);

var pos = outerArc.centroid(d2);

pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);

return [arc.centroid(d2), outerArc.centroid(d2), pos];

};

});

polyline.exit()

.remove();

};

});

}

//Initiate AnimatedDonutChart extension

Extension_Init();

Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 18:05:42 GMT

Where are you loading d3 files?

you should have something like

Qva.LoadScript(AnimatedDonutChart_path + 'd3.js');

somewhere in your code

Re: Extension Object integration

Mon, 16 Jun 2014 18:08:50 GMT

yes I am loading it...

Qva.LoadScript(AnimatedDonutChart_path + "d3_v3.js", function() {};

its there in the code.

Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 18:15:10 GMT

Could you zip your extension and post here?

Re: Re: Extension Object integration

Mon, 16 Jun 2014 18:22:21 GMT

Re: Re: Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 19:02:34 GMT

Try this script.js

Re: Re: Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 19:03:12 GMT

Re: Re: Re: Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 19:05:16 GMT

The main error was very first line, you shouldn´t refer to "Objects" path

var AnimatedDonutChart_path = Qva.Remote + "?public=only&name=Extensions/AnimatedDonutChart/";

Re: Extension Object integration

Mon, 16 Jun 2014 19:10:51 GMT

I tried the code, but only the image is coming in the background and not inside the object window.

Re: Extension Object integration

Mon, 16 Jun 2014 19:18:55 GMT

Thank you so much Anjos. I'm checking out the links you posted and would implement what I get from it and let you know. Thanks

Re: Extension Object integration

Alexander_Thor — Mon, 16 Jun 2014 20:15:40 GMT

That's because you are appending your svg elements into the body and not your extension object.

Change your selector to: var svg = d3.select(this.Element).append()...

Also since now you will be appending a donut chart every time the data updates I would suggest you either destroy the entire element or join the updated data onto the DOM.

Simple example to destroy the element: $(this.Element).empty()

Re: Extension Object integration

Alexander_Thor — Mon, 16 Jun 2014 20:19:32 GMT

You can find a sunburst implementation at QlikView - Intelection 2014

The site is in Swedish but you should be able to work through the source at least.

My example is built using workbench but it's the same principle for extension objects so it's fairly quick to port over.

The hard part is for you to figure out how you want the color logic to be handled, I could hard code it thankfully

Re: Extension Object integration

Clever_Anjos — Mon, 16 Jun 2014 20:52:50 GMT

That´s because your´re appending your graph to body

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

you should use this.Element.innerHTML

Re: Extension Object integration

Mon, 16 Jun 2014 20:53:41 GMT

Thank you Alexander, I appreciate the help:). Does this link have the code behind the implementation as well? or is it just the implementation? The source code is there, but I'm a little confused how to bring in data into Qlikview for this chart. The source code I was looking at takes data from a csv file which seemed a little tricky. And this may be a very basic question, but how do I know what the right amount of dimensions and Measures would be for this chart? I'm a beginner so please pardon my silly questions

Thank you

Re: Extension Object integration

Tue, 17 Jun 2014 18:51:41 GMT

Thank you so much for your help... But I am still unable to get the desired results. The chart after doing the changes as you suggested is now having some portion inside the window and some portion outside the window and also I am not able to create the randomize button after clicking which there should be some animation in the chart.

Please help me out with this.