hhy5277/js-api-samples

Sample code for the Tableau JavaScript API

js-api-samples

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)