Our Blog

Ever had to explain to someone the process of clicking in the white space to activate a sheet, finding the toolbar, and then explaining which buttons perform the proper exporting action? I have gone through that process more times than I care to admit, and I never get better at explaining it…

Tableau 10 has a wealth of shiny new desktop features, but one of the best new features (IMO) comes in the form of a JavaScript API enhancement. Please take a moment to welcome getData() to the JavaScript API family with me! You can read through some of the new developer features here, and for a deeper dive into getData(), check out what Robert Rouse has to say on the InterWorks blog here.

getData()

Essentially speaking, getData() gives us the ability to extract all the data from a viz on Tableau Server and store it in our browser for other uses. Most of the use cases I’ve seen so far revolve around storing viz data for use in creating web-based vizzes using D3.js, but I want to take a moment to explore how we can use getData() to give our business users what they always ask for… the data in Excel. Here is an example user story:

“As a user, I would like the ability to select any single sheet on a dashboard, and export the data to Excel for further analysis”

At this point you might be saying something like, “Well that’s great, but we can already do this using Tableau Server’s toolbar?” Again… I’d like to ask if you have ever had to explain to someone the process of clicking in the white space to activate a sheet, finding the toolbar, and then making sure to explain which buttons perform the proper exporting action?

Stop here for a working example

See the Pen Tableau 10 getData() Export by Curtis Harris (@curtisharris7) on CodePen.0

Poorly written code explanation

As stated earlier, go read Robert’s blog, as it is the framework for most of my code. Using the methods outlined by Robert, I was able to get data from a specific sheet on a dashboard, and store it in an array. What we really want was the ability to let the user select from any of the sheets, which requires us to build a select box when the viz first loads, or onFirstInteractive for those already familiar with the JavaScript API.

There are two main sections to our JavaScript: All the stuff that happens when the viz loads, and all the stuff that happens when we click the “Export data to CSV file” button. The first part is shown below… with a poor attempt at commenting. As with most of my JavaScript work, the only thing you really need to do to replicate is replace my url with your own. If you must know what else is going on… the code reads like this:

  • Load up the viz specified in url
  • Find the active sheet and store the name
  • Find all the worksheets in the active sheet
  • Store worksheet names in the sheetNames array
  • Build a list of sheet names to use in an HTML select box

All of this happens on the first load of the viz… cool right?

api1

The second section of code, and the most important is almost a direct replication from the InterWorks blog. One of the major changes I’ve made involves sending a sheet name to the getVizData() function. The sheet name we are sending comes from the select box we created in the code above… no hard coding needed! See below that we are querying the SheetList and getting the selected value. Then telling Tableau to give us the data where the actual sheet name equals the selection from our select box.

api2

Another change that was made was using a library called alasql, which enables us to send our stored data out to a CSV using a SQL like language. Using this library was as simple as adding the reference in our head section of the HTML, and one line of code.

api3

Again, if you want to deploy this, all you really need is a Tableau URL and it should just work! Send me an email if you are trying things out and it isn’t working as expected… curtis.harris7@gmail.com.