/js-api-samples

Sample code for the Tableau JavaScript API

Primary LanguageHTMLMIT LicenseMIT

js-api-samples

Tableau Supported

This repository contains samples for the Tableau JavaScript API. You will also find companion content here for the JS API video series. Official developer docs for the JS API can be found here.

Getting Started

  • Clone this repository
  • Try the samples
  • Use 'Issues' to note any bugs or to request new samples
  • Let us know if you have samples of your own you'd like to share
  • Check out the Tableau Developer Portal at http://developers.tableau.com for a tutorial, the official docs, and the community forum

JS API Samples

These are created and maintained by Tableau.

Demo Source Code Description
Basic Embed basicEmbed.html Embed a visualization in a div element.
Dynamic Load dynamicLoad.html Dynamically load and remove visualizations. Click the Previous and Next buttons to display other visualizations in a predefined list.
Export to PDF exportToPDF.html Export the current visualization view to a PDF file.
Filter filter.html Apply a filter to a visualization using controls on the page.
Get Data getDataBasic.html Get the underlying data for the currently displayed viz.
Resize resize.html Resize a visualization to a size that you specify.
Respond to Events respondToEvents.html Display information about marks as you select them.
Select Marks selectMarks.html Select a set of marks in a visualization.

Videos

The videos are hosted on YouTube:

Title Length Learning Objectives
JS API: Introduction 13:39 Why to use JS API, how it works, get started using it, helpful resources

Detailed Outline:
Learning objectives (00:50)
Why use the JS API? (01:36)
What do you need? (06:53)
How it works (07:28)
HTML & JS code (09:17)
More resources (12:00)
JS API: Tutorial Walk-Through 27:09 Embedding a viz, using Filters and Tabs, Selecting values, export to PDF and CSV, custom JavaScript for events

Detailed Outline:
Learning objectives (01:22)
Starting the tutorial (02:20)
Embedding the viz (04:09)
Filtering (06:35)
Switching tabs (08:08)
Selecting values (09:21)
Chaining calls (11:12)
Working with sheets (15:26)
Using the toolbar (19:08)
Eventing (20:39)
More resources (25:35)
JS API: Embedding and Interactions 22:58 More with embedding, switching tabs, filtering and selecting marks

Detailed Outline:
Learning objectives (00:58)
Prerequisites (01:24)
Companion content set-up (02:15)
Project overview & coding environment (03:14)
Adding the JS API library (05:54)
Adding <div> for the viz (06:56)
Custom JS functions (07:40)
Load the viz (09:00)
Switching the view (13:18)
Applying a filter (15:28)
Selecting marks (19:05)
More resources (21:10)
JS API: Tips and Tricks 28:30 Common 'gotchas', how to use asynchronous functions, creating event listeners

Detailed Outline:
Learning objectives (01:05)
Prerequisites (01:53)
Getting started & set-up (02:41)
Preview: final application (03:50)
Understanding API versions (05:23)
Tip: Publish sheets as tabs (06:57)
Tip: Dashboards and javascript sheet.applyFilterAsync error (7:50)
Tip: using async correctly (13:17)
Event listeners (19:01)
Doing work as a viz loads (23:36)
More resources (26:21)