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
