Clojure FOR BI PROS Tableau
getData() function in the new Tableau 10 JavaScript API
August 16, 2016
, , , , ,

Tableau getData() functionTableau’s Javascript API evolves fast. In just a few versions we have arrived from the basic embedding to an event based, fully asynchronous API. Maybe the last, missing piece was accessing the summary and underlying data (however most of us used the vud  vizql controller to get the underlying data as featured in our excel downloader for tableau). With Tableau 10 this is also possible in a standard way: you can use two new Sheet level getData functions: getSummaryData() and getUnderlyingData() .

But why is this such a great deal?

Use Cases for getUnderlyingData()

The most important thing is that you can complete visualizations with more, data driven components. You can retrieve users’ selection and embed their data to D3 visualizations, show interactive google maps with the selected marks’ underlying dataset. The possibilities are unlimited. In this blog post I will show the function’s basic usage: getting the data and printing it in a nice, interactive table to view and search the data.

Getting Summary or Underlying data from a Viz

Getting Summary or Underlying data from a Viz

Indigents: DataTables, React and CLJS

For the best experience I use Data Tables to show the underlying and summary table. It’s a cutting edge jQuery plugin that allows to display searchable, paginated tables with almost no efforts. To render the page I use my standard toolset: bootstrap css to have some basic style, react/reagent to manage HTML/DOM (you remember, in 2016 no one writes HTML) and ClojureScript because I still truly believe that only a few people on this planet can write good javascript while everyone tries and I’m most probably not one of those.

Tableau getData API

JavaScript API was completed with two new functions in the Sheet  class: getSummaryDataAsync  and getUnderlyingDataAsync . Both take one parameter ( getSummaryDataOptions ) where you can specify if you’d like to ignore the column name aliases and/or current selections, the maximum number of rows to return and in case of underlying data if you’d like to see all columns or just the relevant ones.

After calling both functions the result is a SheetData object. It contains the data ( getData() ) that is a simple two dimensional array of cells and the columns metadata ( getColumns() ) with column name, index and datatype.

The working code

The complete code is less than 100 lines so let’s see what it has for us.

This is the same usual viz initalization: when we reach the onFirstInteractive state we just update the application state with :ready = true .  Please note that we store the maxRows and includeAllColumns in the application state as well.

These two reagent components will render two buttons. If those are clicked we call get-data-and-show-modal! and pass a callback function that calls an another callback calling getSummaryData or getUnderlyingData respectively. What a callception!

The last part is to show the modal window and call the getData function depending on the first parameter from the button’s on-click:

The modal-render  function does the magic: it transforms the SheetData  to a nice HTML table.

All together

The source code is here, the demo site is here and the comment box is over there – feel free to ask your questions if you have any.


Tamás Földi

Related items

/ You may check this items as well

sync frelard

Tableau Extensions Addons Introduction: Synchronized Scrollbars

At this year’s Tableau Conference, I tried t...

Read more

Tableau External Services API: Adding Haskell Expressions as Calculations

We all have our own Tableau Conference habits.  M...

Read more
Scaling Tableau Image

Scaling out Tableau Extracts – Building a distributed, multi-node MPP Hyper Cluster

Tableau Hyper Database (“Extract”) is ...

Read more