I am trying to create a Donut chart with the total value on the middle, and it worked fine by using the code below on Attributes > JavaScript Initialization Code together with a variable defined by a SQL Query (P16_TOTAL):
function( options ){
this.pieSliceLabel = function(dataContext){
var series_name,
percent = Math.round(dataContext.value/dataContext.totalValue*100);
if ( dataContext.seriesData ) {
series_name = dataContext.seriesData.name;
} else {
series_name = 'Other';
}
return series_name + " " + percent + "% ( " + dataContext.value + " )";
}
options.dataLabel = pieSliceLabel;
options.pieCenter = {
label: "Total :" + $x("P16_TOTAL").value
}
return options;
}
The result so far is great, but I've been unable to update the Total value when I apply filters on the chart. The filter are created as Page Items which saves the values that are used to refresh my Where Clause on the SQL Queries I'm using. For example, when adding filters for Country I will add to my SQL Query:
(COUNTRY = :P16_COUNTRY_3 OR :P16_COUNTRY_3 IS NULL)
Given all of that, the label inside the Donut Chart will update only if I reload (F5) the whole page. I'm able to update correctly the P16_TOTAL value, but it is not displayed on my visualization. I'm guessing this happens because the JavaScript Initialization Code only runs when the page is started. What could I do to refresh it? I'm not having any success with Dynamic Actions. Example here: https://i.imgur.com/zyRnu4j.png
Chart is updated, but label in the middle stays with the outdated value.