Skip to main content
Announcements
Join us at Qlik Connect for 3 magical days of learning, networking,and inspiration! REGISTER TODAY and save!
cancel
Showing results for 
Search instead for 
Did you mean: 
jamey_copeland
Partner - Contributor
Partner - 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
ErikWetterberg

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