Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

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.html(html);           

  $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);

  $(this).toggleClass("selected");     

  }

  });

from  https://help.qlik.com/sense/en-us/developer/WikipediaInsert Wikipedia Linkhttps://help.qlik.com/sense/en-us/developer/#../Subsystems/Workbench/Content/CodeExamples/ext_people...

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,

FMa

1 Solution

Accepted Solutions
Not applicable
Author

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

http://bl.ocks.org/d3noob

View solution in original post

8 Replies
Not applicable
Author

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

http://bl.ocks.org/d3noob

yblake
Partner - Creator II
Partner - Creator II

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.

Regards

pgrenier
Partner - Creator III
Partner - Creator III

Good morning Francesco,

Were you able to contribute an upgrade to Brian Munz'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.

Regards,

Philippe

Not applicable
Author

Thank you,  I'll try to integrate and you (all) will be informed.

FMa

balexbyrd
Contributor III
Contributor III

yblake

I'm following #2 and I didn't quite understand what you meant by this:

Where would I put this line? D3 data wasn't intuitive enough

Thanks in advance!

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

add "selected":0 to your D3 data,      <---- This line here

add click event handler on your D3 element :

yblake
Partner - Creator II
Partner - Creator II

You will find a link to a very simple extension that illustrates this in this thread :

selectValues extension API do not unselect last selected value

The extension and test application can be downloaded from :

yblake/d3click · GitHub

However, as noticed in the thread, there is a bug since Sense 2.0.x using D3 click event when you try to clear the last selected value.

Hope this may help you.

ErikWetterberg

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 + "'"
}

Erik

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.

ErikWetterberg

Same here, others is now select table, so you could do just:

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

  // Retrieve needed hypercube data here

  "dimensionid": d[0].qElemNumber

});

Erik

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.