AnsweredAssumed Answered

Is it possible to handle events in add-ins used in templates?

Question asked by Matheus Figueiredo on Mar 8, 2018
Latest reply on Mar 25, 2018 by Matheus Figueiredo

I'd like to dinamically generate charts according to the result of a query (just like in the TemplateAddins.wcdf that comes with Pentaho BI Server 8.0), but also handle click events over individual values on them.

 

To make things simple, I created a template with is connected to a datasource with returns just two columns: the first one is a string representing a question, and the second are the values used to plot a pie chart according to the answers received.

 

function() {
    return  '<div class="row card">' +
            '<% _.each(items, function(elem) { %>' +
            '  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 single clickable" data-category="<%=elem[0]%>"> '+
            '    <div class="category"> <b><%= elem[0] %> </b> </div>'+
            '    <div class="addin"> <%= addin(elem[1], "cccChart", "cccChart") %> </div>'+
            '  </div>' +
            '<% }); %>' +
            '</div>';
} 

 

The datasource is a PostgreSQL select as simple as the following:

SELECT 'Question 1', '[["Answer1",30],["Answer2",20],["Answer3",50]]'
UNION
SELECT 'Question 2', '[["Answer1",30],["Answer2",36],["Answer 3","34"]]'

 

I've set the following add-in options:

 

setCCCChartOpts: function(that) {
      that.setAddInOptions("templateType","cccChart", {
        type: 'PieChart',
        chartOpts: {
          width: 200,
          height: 200,
          seriesInRows: false,
          crossTabMode: false,
          timeSeries: false,
          legendVisible: true,
          valuesLabelStyle: 'inside',
          valuesOptimizeLegibility: true,
          valueFormat: function(value) {
            return Utils.numberFormat(value, "#A");
          },
          clearSelectionMode: false,
          selectable: false,
          clickable: true,
          interactive: false,
          hoverable:  false,
          valuesFont: 'normal 9px "Open Sans"',
          slice_innerRadiusEx: '50%',
          slice_strokeStyle:   'white',
          colors: [
            '#333333', '#777777', '#FFC20F', '#FFE085',
            '#00325b', '#005CA7', '#0086F4', '#39A74A',
            '#63CA73', '#80BCA3', '#655643', '#BF4D28'
          ]
        }
      });
    }

 

The charts are rendered as expected. But I'd like to allow users to click under a pie chart and, based on the item clicked, set a parameter. For that be possible, I need to know the selected item. But how to do that?

 

The sample had the following code for the click action (click , .single.clickable), but it just gets the kind of chart that was clicked, not the selected value in the chart:

 

function(event) {
    var $elem = $(event.currentTarget);    
    var selected = $elem.data('category');
    $elem.toggleClass('selected');
    this.dashboard.fireChange('selected', selected);
    console.log(selected);
}

 

So, is it actually possible to detect the selected item under a add-in chart? Can any of you point me to the right direction?

 

Thanks in advance,

Matheus

Outcomes