dates – Gunning for Tableau

Tableau handles dates fairly flexibly – it allows a variety of input formats, handles them as hierarchies naturally, and provides a ton of calculation flexibility for any sort of math or logic. The two major criticisms I hear from Tableau users are how they interact with a) parameters and b) filters. The parameter ask is fairly simple – people want parameters to automatically update to “today” when they load a dashboard. Luckily, there’s a free extension available in the extensions gallery which does exactly this. It’s built and hosted by Tableau, and the source code is freely available.

Filters, on the other hand, have a lot more options for implementation. Relative date filters are very powerful, but what if I want to look at a subset of data from last year? Date sliders are the only way to do that, but they have their own limitations. A date slider only has two settings for it’s default settings.

Full extent of the data
1. When the dashboard loads, Tableau finds the full range of your date data and sets the bounds to those dates. This is great because when you load the dashboard, it’ll take into account all of the most recent data. The problem arises when you have 5 years worth of data. Do you really want to query all that when it first loads, just so you can look at this week’s data?
Pre-set values
1. If you want to make sure that Tableau doesn’t query all of your data, you can pre-set the slider values. The problem here is that it isn’t forward-looking. If I publish a dashboard on 1/1/2019 and hardcode the values, then when someone loads the dashboard in the future, the filter will still be set to 1/1/2019 as the max.

So there’s the problem – Tableau allows you to hardcode both sides of of the slider or neither. Most people want to hardcode one side and have the other be dynamic…so that’s the extension we built. A Tableau Extension is a custom webpage which is added to a dashboard to extend the functionality. For more info on extensions, check out the Tableau developers page.

Below is a quick tutorial to build out an extension for custom date functionality in Tableau. The code I’m referencing is available here. The left-hand side of that page contains an HTML file, a JS file, a TREX file, and a favicon file, which is everything you’ll need to create an extension.

Build a webpage.
1. An extension is a custom HTML page. In this case, the HTML page does almost nothing, so it’ll just contain a title and references to the JS we’re using (jQuery, bootstrap, the Extensions Library, our JS file).
Add JS functionality. Everything from here on out is in the JS file.
1. First thing we need to do is initialize the API (line 1).
Create a function to update your filter (line 5, updateFilterRange()).
Set variables for your start and end points.
1. We’ll hardcode the starting date to a date of your choice. This is easily done by creating a date in JS.
  1. let minDate = new Date(“1/1/2014”)
2. For the upper limit, you’ve got flexibility. The two major use cases I see here are setting it to “today” or setting it to the highest date in the dataset. Setting it to “today” is easy, as a Date instance in JS will default to “today”. The other option is getting data from the workbook itself, which is what we’ve done in the sample code.
  1. Create a calculation in the workbook which returns your highest date. Using an LOD to return this is simple {FIXED : MAX([Date])}. Put this calculation on detail on your target worksheet to make it available to the API.
  2. In your JS, we make an API call to return data from your sheet. This returns summary data, meaning one result per mark on the sheet. From the table returned, we’ll find your Max Date column. Because it returns the same result for every mark, we’ll can use Max Date from any mark. (Note that we could have calculated max date here instead of using an LOD, but we’re taking advantage of the Hyper database instead of iterating through all of your data in JS). Set this as your maxDate variable.
  3. Invoke the applyFilterRangeAsync function. It takes 3 arguments: the field you defined at the beginning, the minDate that you hard-coded, and the maxDate returned from our table.
Call the function you’ve created.

tableau.extensions.initializeAsync().then(() => {
  updateFilterRangeDataSource();
});

function updateFilterRangeDataSource() {
  //define our target sheet, field, minimum date, and dashboard
  let fieldName = 'Date';
  let sheetName = 'Timeline';
  let minDate = new Date("1/1/2014");
  let dashboard = tableau.extensions.dashboardContent.dashboard;
  let selectedWorksheet = dashboard.worksheets.find(w => w.name === sheetName);
  //get data back from the workbook to find our highest possible date
  selectedWorksheet.getSummaryDataAsync().then( table => {
    let maxDateColumn = table.columns.find(columnNames => columnNames.fieldName === 'Max Date').index;
    let maxDate = new Date(table.data[0][maxDateColumn].value);
    //make the API call to update the Tableau Filter
    selectedWorksheet.applyRangeFilterAsync(fieldName, { min: minDate ,max: maxDate});
  });
}

6. Add the TREX file to your workbook!

There it is! 15 lines of JavaScript and you’ve built a feature which massively extends Tableau’s default date functionality. Of course, this is far from the limits of what we can do with the extensions. If you’d like to build a custom UI for your date filters, there are tons of JS widgets you could incorporate into an extension. If you’d like any other default ranges, you just need to tweak the variables. If you’d like to make this more scalable, you can use the Settings namespace in the Extensions API to make this workbook-agnostic.

Overall, though, it’s cool to note what we’ve done here. The Extensions API is often billed as a way to integrate two applications, or a way to create custom visual elements (and it’s great for both of these things). To me, however, the biggest wins I’ve had with the Extensions API have been creating functionality that Tableau previously didn’t have, and doing so in an efficient way.

Tag: dates

Date Filter Extensions in Tableau