20 Replies Latest reply: Jun 27, 2014 12:39 PM by Mohd Khan RSS

    Extension Object integration

      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

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

           

          Regards

          Mohd

              • Re: Extension Object integration

                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

                    Please post your

                    script.js

                    definition.xml

                    other sources

                    I´m gonna check

                      • Re: Extension Object integration

                        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

                      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

                    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

                        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