Playing around with Tableau JS API

View the Project on GitHub dsmdavid/Tableau-JS-API


Outcome of Back2School week at The Dataschool for Eliott & David.

What is it not for and what is it for:

  1. Things you don’t need Tableau JS API for:
    i.e. using this Marginal Tax calculator a couple of ways of embedding it:
    1. Embed in the Dataschool blog (just use iframe and the link found in the share button). Example here, Page is only available for those signed in to the DS Blog.
    2. Embed in your own page/blog (just use the embed code inside an HTML box). Example in David’s blog.
      Or this one for a standalone page.
  2. Things you need Tableau JS API for:
    1. Embed in your page and do anything with it (beyond the Viz itself):
      1. Autoupdate.
        A Dashboard with a time (NOW() calculation in Tableau) that refreshes every X seconds. See example by Christophel Russell in the resources section below).
      2. Pass multiple filters. (No examples yet)
      3. Have a two way communication (interact with the Viz, take that data into the page, evaluate it and feed it back to the Viz –in this particular example, the Viz is in autorefresh by default every 10 seconds. A counter on top helps keeping track of the time left. Interacting with the boxes in the Dashboard allows fetching that value (in seconds) and change both the counter on top as well as send it back to the Viz and change the refresh time).
      4. Drive alarms in the webpage based on the data You’ll need to log in to TIL tableauserver to see the dashboard (and run the workflows here to update the datasource from not warning to warning). Here if you want to download just the basic page. The basic idea is a dashboard, hosted on a company’s server, needs to be constantly on monitoring some critical measure. Whenever a critical value comes in, action needs to be immediate, so the webpage will launch an alert to get the attention). This is what it should look video.
      5. Alternatively…
        1. use the one using a dashboard on Tableau Public and simulate the update in the viz using filters. Find the blog detailing the step-by-step here
        2. Use the one using my dev site – datasource in Snowflake IL (“DBT_TABLEAU”.”ANALYTICS”.”SUPERSTORE_STATUS” points to “analytics.superstore_status_without_warning” by default, simulate malfunction by pointing to “analytics.superstore_status_with_warning” instead).


  1. Tableau’s official API reference.
  2. Tableau’s Github on JS API and Videos.
  3. Christopher Russell’s example and original workbook on autorefresh.
  4. Tableau’s interactive tutorial.
  5. Tamas Foldi’s many examples.