cancel
Showing results for 
Search instead for 
Did you mean: 
edselv
9 - Travel Pro
9 - Travel Pro

This article will show you how to quickly color a pivot table into two sections: by Row and by Value

1. Build your pivot table.

2. In the widget editor, add the widget script below. Information on how to add a widget script here: Dashboard and Widget JavaScript Extensions

 

 

 

 

 

var $dom = prism.$injector.get('ux-controls.services.$dom');
var tip = null;

widget.on('cellEnter', function (widget, event) {
   var measure  = event.metadata.measure;
   if (tip) { tip.deactivate(); }
   if (!measure) { return; }
   var scope = prism.$ngscope.$new();
   scope.title = 'Cell Info:';
	scope.text = 'Value - ' + event.cell.content;
	scope.text2 = 'Column - ' + measure.title;
	//add more text scope here
 
   tip = $dom.tip({
       template: '<span> <b> {{title}} </b> <br> {{text}} <br> {{text2}} <br> </span>',
       scope: scope,
   }, {
       placement: { place: 'l', anchor: 't' },
       radial: false
   });
  
   tip.activate({x: event.domEvent.clientX, y: event.domEvent.clientY, space: 5});
});

widget.on('cellLeave', function (widget, event) {
   if (tip) {
       tip.deactivate();
   }
});

 

 

 

 

Note:
- You can change the values presented by changing the metadata you are pointing too (examples in 'scope.text' and 'scope.text2'). You can add more data to be included by adding another scope field.

- You can change the template of how your tooltip represents data by changing the html in the 'template' field. You can use HTML to customize the look of the text in the tooltip.

For additional references on available metadata and Pivot 2 functionality please see: https://sisense.dev/guides/customJs/jsApiRef/metadata-item.html

Example:

Screen Shot 2022-04-19 at 14.03.05.png



Rate this article:
Version history
Last update:
‎01-30-2024 09:44 AM
Updated by: