8 Replies Latest reply: Sep 9, 2015 5:47 AM by Erik Wetterberg RSS

    Make non selectable extension selectable

      Hi all,

           I'm trying to modify a non selectable extension (sunburst zoomable D3) to selectable by adding the js code:


        $element.find('.selectable').on('qv-activate', function() {

        if(this.hasAttribute("data-value")) {

              var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;

              self.selectValues(dim, [value], true);





      from  https://help.qlik.com/sense/en-us/developer/WikipediaInsert Wikipedia Linkhttps://help.qlik.com/sense/en-us/developer/#../Subsystems/Workbench/Content/CodeExamples/ext_peoplechart.htm%3FTocPath%3DQlik%2520Sense%2520Workbench%7CCode%2520examples%7C_____4


      The source is the sunburst zoomable D3  brianwmunz/QlikSenseD3ZoomableSunburst · GitHub


      That extension works fine but does not set the selections within Sense (current selection bar) done with mouse clicks.


      The matter is that it seems there is no way to transform the clickable areas into selectable ones - if I debug the code, the    $element.find('.selectable').on('qv-activate', function()  is not "triggered".


      .selectable belongs to standard client.css but it seems is ignored.


      Does anyone have an idea on how to make these areas selectable?


      Thank you,



        • Re: Make non selectable extension selectable

          You need to set the class selectable to the element and add the qElemNumber to data-value.


          In the people chart example look at this section:

          $.each(qData.qMatrix, function(key, row) {
            if(row.length > 1) {
            //dimension is first, measure second
            var dim = row[0], meas = row[1];
            if(dim.qIsOtherCell) {
            dim.qText = layout.qHyperCube.qDimensionInfo[0].othersLabel;
            html += '<div title="' + dim.qText + ':' + meas.qText + '"';
            //negative elementnumbers are not selectable
            if(dim.qElemNumber > -1) {
            html += "class='selectable' data-value='" + dim.qElemNumber + "'"
            html += '>';
            html += "<div class='label'>" + dim.qText + "</div>";
            html += "<div class='bar' style='width:" + Math.round(w * (meas.qNum / vmax )) + "px;'> </div>";
            html += "</div>";


          When you figured that out you need to modifiy the click function. I would start with a less complex example like making the simple table extension selectable or/and implement a D3 graph as an extension.

          D3noob has alot of examples with tutorials.

          D3.js Tips and Tricks


            • Re: Make non selectable extension selectable
              Erik Wetterberg

              Hi Karl,

              A small update on the code snippet. In Sense 1.0 'others' (-3) was not selectable in an extension, but from Sense 2.0 it is, so now you could instead do:

              //total (-1) is not selectable
              if(dim.qElemNumber !== -1) {
                 html += "class='selectable' data-value='" + dim.qElemNumber + "'"



              Please mark the appropriate replies as correct or helpful so our team and other members know that your question has been answered to your satisfaction.

            • Re: Make non selectable extension selectable
              YVES BLAKE

              I didn't study this extension in particular, but I'll share two "generic" ways to go :


              1) First you have to backup each dimension value id in your D3 data, i.e :


              var qMatrix = layout.qHyperCube.qDataPages[0].qMatrix;

              var dataD3 = qMatrix.map( function(d) {return {

                // Retrieve needed hypercube data here

                "dimensionid":d[0].qIsOtherCell ? null : d[0].qElemNumber



              Then you have to setup d3 element class and data-value :


              .attr("class", "selectable")

              .attr("data-value",function(d) {return d.dimensionid})


              2) Another way to go is to handle selections with D3.


              add "selected":0 to your D3 data,


              add click event handler on your D3 element :


              .on("click", clickHere)


              Finally handle visual feedback and sense selection in your handler :


              function clickHere(d) {

                if ( d.dimensionid != null ) {

                  d.selected = 1-d.selected;

                  d3.select(this).style("fill", d.selected ? "#52cc52" : "lightgrey");

                  var value = d.dimensionid, dim = 0;

                  self.selectValues(dim, [value], true);




              Hope this will help you.


              • Re: Make non selectable extension selectable
                Philippe Grenier

                Good morning Francesco,


                Were you able to contribute an upgrade to bmz's Zoomable Sunburst extension based on Karl's and/or Yves' tips?


                I would also be quite interested to see a new version of this nice extension object be made available.