topic Re: Make non selectable extension selectable in Integration, Extension & APIs

Make non selectable extension selectable

Fri, 14 Nov 2014 15:41:20 GMT

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 Link https://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,

FMa

Re: Make non selectable extension selectable

Tue, 25 Nov 2014 08:04:24 GMT

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

Re: Make non selectable extension selectable

yblake — Tue, 25 Nov 2014 18:29:29 GMT

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

Re: Make non selectable extension selectable

pgrenier — Thu, 27 Nov 2014 17:12:41 GMT

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

Re: Make non selectable extension selectable

Fri, 28 Nov 2014 11:01:41 GMT

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

FMa

Re: Make non selectable extension selectable

balexbyrd — Tue, 08 Sep 2015 17:20:59 GMT

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 :

Re: Make non selectable extension selectable

yblake — Wed, 09 Sep 2015 08:28:09 GMT

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.

Re: Make non selectable extension selectable

ErikWetterberg — Wed, 09 Sep 2015 09:45:02 GMT

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.

Re: Make non selectable extension selectable

ErikWetterberg — Wed, 09 Sep 2015 09:47:56 GMT

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.