Stacked Bar Chart As Filter Indicators

[intapiuser]

In this post, we will show how to override the default behavior of the stacked bar chart widget.  This will display a block (sized based on the value) for each break by category, and allows filter selection on click of a block.

Create a Sisense bar chart widget that contains a dimension for Break By as well as the value.  To make for a cleaner look, I suggest disabling the x-axis and y-axis formatting and sticking with the Stack 100 Bar type.

I also suggest making sure to disable the dashboard level filter for the Break By dimension, otherwise any selection will slice the data to only the selected member.

Once configured, save the widget, then come back to the widget editor and edit the script.  Take note of the designer options at the top, for deciding on a font color, the height of each bar (in pixels) as well as the sort order of the bars.

/*
Welcome to your Widget's Script.
To learn how you can access the Widget and Dashboard objects, see the online documentation at http://developer.sisense.com/pages/viewpage.action?pageId=557127
*/

// Designer Options
var fontColor = '#ffffff',
 barHeight = 75,
 reverseOrder = false;

widget.on('render', function(widget,args){

 // Get the formatting mask
 var mask = $$get(widget.metadata.panel('values').items[0], 'format.mask', null);

 // Get the sisense formatter
 var $filter = prism.$injector.get('$filter')('numeric');

 // Custom formatter function 
 function customFormatter(options){

  // Center the labels
  options.align = "center";

  // Change the color
  options.style.color = fontColor;

  // Change the label text
  var myValue = $filter(this.y,mask);

  // Return both the break by name + formatted value
  return this.series.name + '<br />' + myValue;
 }

 // Get a reference to the break by's metadata item
 var metadata = widget.metadata.panel('break by').items[0].jaql;

 // Define the options for filtering
 var filterOptions = {
 'save': true,
 'refresh': true,
 'unionIfSameDimensionAndSameType':false
 };

 // Custom Click Handler
 function customClick(event){
 
  // Look for any existing filter
  var matchingFilters = widget.dashboard.filters.$$items.filter(function(f){ 
   return f.jaql.dim == metadata.dim;
  })

  // Get the existing filter's selection
  var existingMember = matchingFilters.length > 0 ? $$get(matchingFilters[0], 'jaql.filter.members', []) : [];

  // Get the clicked break by member
  var thisMember = this.series.name;

  // If there is already a selection, is it the same as what was just clicked?
  var sameSelection = existingMember.length > 0 ? (existingMember[0] == thisMember) : false;

  // Generate the filter jaql
  var jaql = {
   'jaql': $$.object.clone(metadata, true)
  }

  // Set the selection
  if (sameSelection) {
   // New Selection, select this member
   jaql.jaql.filter = {
    'all': true
   }
  } else {
   // Same selection, go back to include all
   jaql.jaql.filter = {
    members: [thisMember]
   }
  }

  // Save the filter to the dashboard
  widget.dashboard.filters.update(jaql,filterOptions);
 };

 // Override the value label formatter
 widget.queryResult.plotOptions.series.dataLabels.formatter = customFormatter;

 // Loop through each series
 widget.queryResult.series.forEach(function(series){

  // Loop through each data point
  series.data.forEach(function(point){

   // Override the click handler, for each data point
   point.events = {
    click: customClick
   };
  })
 })

 // Increase the bar width
 widget.queryResult.plotOptions.series.pointWidth = barHeight; 

 // Display sort order
 widget.queryResult.yAxis[0].reversedStacks = reverseOrder;
 widget.queryResult.legend.reversed = reverseOrder;
})