Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

jamey_copeland
New Contributor

Making Dimple.js extension data selectable

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

1 Reply
erik_wetterberg
Honored Contributor

Re: Making Dimple.js extension data selectable

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

Erik Wetterberg
https://extendingqlik.upper88.com/
Community Browser