Making Dimple.js extension data selectable

jamey_copeland — Wed, 04 Apr 2018 11:01:52 GMT

I am updating the trellis extension created by agilos.mla located at Qlik Branch.

So far I have added a combination chart to the available charts, and also added in a customized tooltip that fetches the names of the measures and dimensions from the app. I am almost done with all of the updates, but I cannot figure out how to make the data selectable in Qlik sense so that other charts and graphs will react.

I have been using this blog post Make non selectable extension selectable to accomplish this but so far to no avail.

Here is what I have added so far:

I first added the index to the hypercube:

var data = qMatrix.map(function(e){
   var dataItem = {
  dim: e[0].qText,
  trellis: e[1].qText,
  measure1: e[2].qNum,
measure2: e[3].qNum,
index:e[0].qElemNumber
  };
   return dataItem;
  });

Then Later I added attributes to the SVG:

var chartData = dimple.filterData(data, "trellis", tDimValue);
   //console.log(chartData);

   // Use d3 to draw a text label for the trellis
   if (options.trellisLabelPos == "inside") {
  svg
  .append("text")
  .data(data)
  .attr("class", "selectable")
  .attr("x", left + (col * (width + inMarg)) + width/2 )
  .attr("y", top + (row * (height+ inMarg)) + height/2 )
  .attr("data-value",function(d) {return d.index})
  .style("font-family", "sans-serif")
  .style("text-anchor", "middle")
  .style("alignment-baseline", "middle")
  .style("font-size", options.trellisLabelSize+"px")
  .style("font-weight", "bold")
  .style("opacity", 0.3)
  .text(chartData[0].trellis)


  }

Finally I used the following to try and update the app on selection

$element.find('.selectable').on('click', function() {
if(this.hasAttribute("data-value")) {
var value = parseInt(this.getAttribute("data-value"), 10), dim = 0;
console.log(value)
self.selectValues(dim, value, true);
$(this).toggleClass("selected");
}
});

The js compiles fine but it does not seem that the click function is executing (value does not appear in the console log)

My js knowledge is not all that great so any help is greatly appreciated. I have also attached the source code to the post.

Thanks,

Jamey

Re: Making Dimple.js extension data selectable

ErikWetterberg — Fri, 06 Apr 2018 07:11:21 GMT

Hi,

Try setting a breakpoint on line 2 in your second snippet and follow what happens. If you nevere get there, set a breakpoint on line 1 and chack if the selector ($element.find('.selectable')) finds any elements.

Erik Wetterberg

topic Re: Making Dimple.js extension data selectable in Integration, Extension & APIs

Making Dimple.js extension data selectable

Re: Making Dimple.js extension data selectable