Drill To Buttons

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.

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:

Year as the second category:

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();
});