Getting the underlying data in tableau

Question

The data representation was created in Tableau and I am accessing and showing it on my website through the Tableau JS API: link to the API.

Obtaining the viz and showing my Tableau have already been done. I have a Bar Chart showing my data in horizontal columns. The idea is that I want to be able to click on a column and then get the data which goes into this column.

Let's say we have 12 elements. They are represented by 3 columns. The first column has 5, the second 3 and the third 4 elements. In my case, after selecting the column with 4 elements I would want to be able to get the underlying 4 data entries.

I have been going through the API Documentation (link) and I have added on click listener for marksSelection. However, it only returns me the "sorting conditions" so to say. I tried getting the getUnderlyingDataAsync and then getData() but the returned data is not really in a format which I can use (since there are only pairs of row and column and not the full data entries).

Is something like this possible?

Answer 1

I solved it in a couple of steps following the API:

1. getUnderlyingDataAsync to obtain a DataTable, save it to an object called dataTable.
2. Get all of the (raw) data by calling dataTable.getData(). It returns a 2D array. To help you imagine the structure, let's say that the data source has 50 objects then the array will have a length of 50. If each object has 5 properties then the nested array will have a length of 5 (with each property represented as 1 element).
3. Get all of the columns by calling dataTable.getColumns(). Here you will need the name and index properties.
4. Create an object containing our actual JSON data by combining the columns in (3) and the (raw) data from (2).

Now you should have a structured array of objects.