Adding selections to the bars in the chart

The beauty of Qlik Sense is that you can not only consume and visualize the data but also interact with it. The next step for the visualization then it becomes interactive by responding to click even on the individual bars. To achieve it, you first define the selection function in the scope. It should reside on the same level as scope.prep(), scope.init() and scope.render():

//MasteringQSBarChart.js (snippet)
scope.selection = function(elementid){
//Null, which carries elementid: -2, is not selectable
if(elementid>=0){
this.backendApi.selectValues(0, [elementid], false);
//Multi-select
//self.selectValues(0, [vElementId], false);
}
}

As you can see in the commented part, you can choose to either implement selections directly or by adding the option to support multi-select, which requires you to confirm the selections. Ideally, this becomes a setting in the property panel that permits you to check which selection mode should be applied. With the function, all you need to do now is to go back to your scope.render() and append another .on("click") function to your bars:

//MasteringQSBarChart.js - scope.render() (snippet)
//Update
scope.svg.selectAll('rect')
.on("click", function(d, e){
scope.selection(d.BarID)
})
.attr("elementid", function(d){
return d.BarID
})
.attr('fill', scope.bar_color)
.attr('width', scope.bar_width)
.attr('x', function(d){
return scope.x(d.Bar)
})
.transition()
.duration(300)
.attr('y', function(d){
return scope.y(d.Value);
})
.attr('height', function(d){
return scope.height-scope.y(d.Value)
})
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.31.22