Data Visualisation for Non-Noobs: Improving the Hierarchy – Using  JavaScript API to feed a click action into a parameter control

This blog is based on a project we did with BCG, where we were asked to improve the hierarchy function in Tableau. At first I was a little confused, as the drill down function in hierarchies works pretty well in Tableau, although, it is true that sometimes, you want only to drill from, for example, one country to the states within it, without having to see the breakdown of all of the countries. 

After much playing around in Tableau, I realised that really the best way to go about this problem, is using a parameter, as shown below.

1

Here is the calculation you need to build the parameter:

Capture

However, what we really want, is to be able to click on one region to expand it and not have to go and look for the parameter control. So what we need to do is get tableau to recognise the click as the parameter control.  To do this, you need to use a JavaScript API.

Step 1:  build your viz with the parameter control. This needs to be hosted on a server. I hosted mine on Tableau Public.

Step 2: Open up the JavaScript in a text editor (you can use notepad, or download sublime text 3 https://www.sublimetext.com/3, which makes the code much, much easier to look at). The code to copy and paste into the editor is below. 

Step 3: Change the lines of text pointed out below, with the annotated changes. 

Picture2

Step 4: Save it as a Chrome HTML Document. If you save it from Sublime, it should do it automatically. 

Step 5: Double click on the saved HTML Document and the browser with the view in it will automatically pop up!

I am trying to figure out how I can do this with multiple layers in the hierarchy. Hopefully that blog will be with you shortly

Hope that helped. Any questions, don’t hesitate to get in touch! 

To find out how to make a double layered drill, please see: http://wp.me/s6XID2-5546

—————————————————————————

This is the code you need: 

<html>
<head>
<title>Amanda</title>
<script type=”text/javascript” src=”http://public.tableau.com/javascripts/api/tableau-2.0.0.min.js”>
//In the src=change the public.tableau.com to your server name
</script>
<script type=”text/javascript”>

var viz_url = “https://public.tableau.com/views/Hierarchiestest/Parameter”
//Put the link to your visualisation above (you can remove everything from the name of your sheet onwards)
var param_name = ‘Choose a country’;
//Fill in the name of your parameter here, copy exactly from your viz
var selection_field_name = ‘Country’;
//Fill in the name of the field that your paramter is choosing from
var worksheets_to_listen_on = {‘Parameter’ : true};
//Fill in the name of the sheet you are referring to. If you are using a dashboard, you will need to name all sheets used in the viz in the following format: {‘Name_Sheet_1’ : true, ‘Name_Sheet_2’ : true, etc}
console.log(worksheets_to_listen_on);
var viz;
var book;
var activeSheet;

function initViz(){
var placeholderDiv = document.getElementById(“tableauViz”);
var options = {
hideTabs: false,
hideToolbar: true,
onFirstInteractive: function () {
book = viz.getWorkbook();
activeSheet = book.getActiveSheet();
}
};

viz = new tableau.Viz(placeholderDiv,viz_url,options);
// Creates the viz

viz.addEventListener(“marksselection”,getMarks);

function getMarks(e){
console.log(‘Result of getMarks:’);
console.log(e);
var ws = e.getWorksheet();
console.log(‘Worksheet obj:’);
console.log(ws);
var ws_name = ws.getName();

if ( worksheets_to_listen_on[ws_name]) {
console.log(‘Marks selection being routed from ‘ + ws_name);
e.getMarksAsync().then( handleMarksSelection );
}
}

function handleMarksSelection(m){

console.log(“[Event] Marks selection, ” + m.length + ” marks”);
console.log(m);

if(m.length == 0){

viz.getWorkbook().changeParameterValueAsync(param_name,’All’).then(
function (){ console.log(‘Parameter set back to All’);}
// Reset to ‘All’ if no selection
);
return;
}

m.getValuesForGivenField = function(fName){
var valuesArray = new Array();

for(i=0;i<this.length;i++){
pairs = this[i].getPairs();
for(j=0;j<pairs.length;j++){
if( pairs[j].fieldName == fName) {
valuesArray.push( pairs[j].formattedValue );

}
}
}
return valuesArray;
}

values = m.getValuesForGivenField(selection_field_name);
console.log(values);

if (values.length === 1){

viz.getWorkbook().changeParameterValueAsync(param_name,values[0]).then(
function (){ console.log(‘Parameter set’);}
);
}
}
}

</script>

</head>
<body onload=”initViz();”>

<div id=’tableauViz’></div>

</body>
</html>

 

 

Based on: https://tableauandbehold.com/2015/11/20/using-tableau-javascript-api-to-fill-parameter-from-a-selection/