Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
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
Guys, Anyone who can guide me a little bit with this? I would appreciate it greatly. Thanks.
Regards
Mohd
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...????
Please post your
script.js
definition.xml
other sources
I´m gonna check
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();
Where are you loading d3 files?
you should have something like
Qva.LoadScript(AnimatedDonutChart_path + 'd3.js');
somewhere in your code
yes I am loading it...
Qva.LoadScript(AnimatedDonutChart_path + "d3_v3.js", function() {};
its there in the code.
Could you zip your extension and post here?
.