-
Re: Extension Object integration
Mohd Khan Jun 16, 2014 12:50 PM (in response to Mohd Khan)Guys, Anyone who can guide me a little bit with this? I would appreciate it greatly. Thanks.
Regards
Mohd
-
-
Re: Extension Object integration
sonali nayak Jun 16, 2014 1:44 PM (in response to Clever Anjos )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 Jun 16, 2014 1:49 PM (in response to sonali nayak)Please post your
script.js
definition.xml
other sources
I´m gonna check
-
Re: Extension Object integration
sonali nayak Jun 16, 2014 1:59 PM (in response to Clever Anjos )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 Jun 16, 2014 2:05 PM (in response to sonali nayak)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
sonali nayak Jun 16, 2014 2:08 PM (in response to Clever Anjos )yes I am loading it...
Qva.LoadScript(AnimatedDonutChart_path + "d3_v3.js", function() {};
its there in the code.
-
Re: Extension Object integration
Clever Anjos Jun 16, 2014 2:15 PM (in response to sonali nayak)Could you zip your extension and post here?
-
Re: Re: Extension Object integration
sonali nayak Jun 16, 2014 2:22 PM (in response to Clever Anjos ).
-
AnimatedDonutChart.zip 54.7 K
-
Re: Re: Re: Extension Object integration
Clever Anjos Jun 16, 2014 3:02 PM (in response to sonali nayak)Try this script.js
-
Script.js 35.2 K
-
Re: Re: Re: Extension Object integration
Clever Anjos Jun 16, 2014 3:03 PM (in response to Clever Anjos )-
Re: Re: Re: Re: Extension Object integration
Clever Anjos Jun 16, 2014 3:05 PM (in response to Clever Anjos )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
sonali nayak Jun 16, 2014 3:10 PM (in response to Clever Anjos )I tried the code, but only the image is coming in the background and not inside the object window.
-
Re: Extension Object integration
Alexander Karlsson Jun 16, 2014 4:15 PM (in response to sonali nayak)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
sonali nayak Jun 17, 2014 2:53 PM (in response to Alexander Karlsson )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.
-
Re: Extension Object integration
Mohd Khan Jun 27, 2014 12:39 PM (in response to sonali nayak)Hey Sonali, were you able to load the chart in Qlikview via an extension?
-
-
-
Re: Extension Object integration
Clever Anjos Jun 16, 2014 4:52 PM (in response to sonali nayak)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
Mohd Khan Jun 16, 2014 3:18 PM (in response to Clever Anjos )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 Karlsson Jun 16, 2014 4:19 PM (in response to Mohd Khan)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
Mohd Khan Jun 16, 2014 4:53 PM (in response to Alexander Karlsson )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
-