cancel
Showing results for 
Search instead for 
Did you mean: 

Drill To Buttons

liamcameron
8 - Cloud Apps
8 - Cloud Apps

our userss have complained that having to teach people how to right click and find the drill feature, they'd instead like a button at the top of the visual where they can click and it applies the drill function. i'm sure there is a jaql query or implementation we could do for this??

liamcameron_1-1716351221988.png

 

 

 

2 REPLIES 2

gwolfe
10 - ETL
10 - ETL

I would also like to know how to do this. 

TriAnthony
Sisense Team Member
Sisense Team Member

Hi @liamcameron and @gwolfe,

Since drilling is typically performed on a single data point (by right clicking the data point), or several data points (by highlighting / dragging and dropping using the left mouse button) of interest, having "drill" buttons at the top of the widget will not achieve the same effect as the out-of-the-box drill feature.

Let's say we have a widget that shows Revenue by Age Range and the users can drill into one of these four columns: Year, Gender, Country, and Product Category. A typical drill flow would involve selecting a specific age range of interest, such as "35-44", and then drilling down into another dimension, like countries.

If the drill options were added as buttons at the top of the widget (like shown in the screenshot below), how would users choose which data point to drill from? Would the drilling be performed on all age ranges? If so, this is effectively the same as replacing the widget's category column from Age Range to the selected drill column.

TriAnthony_1-1718050507860.png

If the requirement here is to just add additional granularity into the widget by adding and switching a second category (or Break By column), it can be achieved with a widget script. See examples below.

Gender as the second category:

TriAnthony_2-1718052991202.png

Year as the second category:

TriAnthony_3-1718053002588.png

You can find below the widget script for this example. If you'd like to reuse this script, you can update the drillOptionXTitle and drillOptionXJAQL constants with your own titles and JAQLs. Note that you need to manually add a second category (could be one of the drilling options) to the widget first before applying the script.

I also attached an example dashboard below. Note that our community site doesn't currently support .dash file attachments, so please change the file extension from .txt to .dash before you import the dashboard.

 

//Define the drilling options' title in a list of constants like shown below
const drillOption1Title = 'Year'
const drillOption2Title = 'Gender'
const drillOption3Title = 'Country'
const drillOption4Title = 'Category'

//Define the drilling options' JAQL in a list of constants like shown below
const drillOption1JAQL = {
    "table": "Commerce",
    "column": "Date",
    "dim": "[Commerce.Date (Calendar)]",
    "datatype": "datetime",
    "merged": true,
    "level": "years",
    "title": "Years in Date"
}

const drillOption2JAQL = {
    "table": "Commerce",
    "column": "Gender",
    "dim": "[Commerce.Gender]",
    "datatype": "text",
    "merged": true,
    "title": "Gender"
}

const drillOption3JAQL = {
    "table": "Country",
    "column": "Country",
    "dim": "[Country.Country]",
    "datatype": "text",
    "merged": true,
    "title": "Country"
}

const drillOption4JAQL = {
    "table": "Category",
    "column": "Category",
    "dim": "[Category.Category]",
    "datatype": "text",
    "merged": true,
    "title": "Category"
}

//Set margin for the buttons
widget.on('processresult', function(se, ev){	
	ev.result.chart.marginTop = 90;
});

var selectedDrillOption = 'None';

widget.on("domready", function(w, args){
	
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc;
	
	chart.renderer.label('Drill into:</br>' + '<b>' + selectedDrillOption + '</b>', 30, 10)
         .css({
            fontSize: '14px'
         })
         .attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
         })
         .add();
	
	chart.renderer.button('None', 120, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {
			selectedDrillOption = 'None';
			widget.metadata.panels[0].items[1].disabled = true;
			widget.refresh();
		})
		.add();
	
	chart.renderer.button(drillOption1Title, 200, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {
			selectedDrillOption = drillOption1Title;
			widget.metadata.panels[0].items[1].disabled = false;
			widget.metadata.panels[0].items[1].jaql = drillOption1JAQL;
			widget.refresh();
		})
		.add();
		
	chart.renderer.button(drillOption2Title, 280, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {
			selectedDrillOption = drillOption2Title;
			widget.metadata.panels[0].items[1].disabled = false;
			widget.metadata.panels[0].items[1].jaql = drillOption2JAQL;
			widget.refresh();
		})
		.add();
	
	chart.renderer.button(drillOption3Title, 360, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {
			selectedDrillOption = drillOption3Title;
			widget.metadata.panels[0].items[1].disabled = false;
			widget.metadata.panels[0].items[1].jaql = drillOption3JAQL;
			widget.refresh();
		})
		.add();
	
	chart.renderer.button(drillOption4Title, 440, 10)
		.attr({
			zIndex : 10,
			height: 15,
			width: 50,
			'text-align': 'center'
		})
		.on('click', function() {
			selectedDrillOption = drillOption4Title;
			widget.metadata.panels[0].items[1].disabled = false;
			widget.metadata.panels[0].items[1].jaql = drillOption4JAQL;
			widget.refresh();
		})
		.add();
});

 

 

Tri Anthony Situmorang