Getting Started With the JavaScript API
With interaction,
you can make an existing
viz have more meaning.
Who isn’t this talk for?
• People who are familiar with the JavaScript API
©2013 Tableau Software Inc. All rights reserved.
What can I do?
• Interact with the viz programmatically, on a webpage
that you made.
• Build an app.
• Tell a story.
©2013 Tableau Software Inc. All rights reserved.
How do I start?
1. Build your webpage
©2013 Tableau Software Inc. All rights reserved.
How do I start?
1. Build your webpage
2. Reference the API JavaScript
<script src=http://your-server-here/javascripts/api/tableau_v8.js>
©2013 Tableau Software Inc. All rights reserved.
How do I start?
1. Build your webpage
2. Reference the API JavaScript
<script src=http://your-server-here/javascripts/api/tableau_v8.js>
3. Embed a viz using the JavaScript API.
©2013 Tableau Software Inc. All rights reserved.
Demo Time!
©2013 Tableau Software Inc. All rights reserved.
Now what?
©2013 Tableau Software Inc. All rights reserved.
Interaction!
• Switching tabs
• Selecting
• Filtering
©2013 Tableau Software Inc. All rights reserved.
More demo time!
©2013 Tableau Software Inc. All rights reserved.
JavaScript API Tutorial
Walkthrough on our website
©2013 Tableau Software Inc. All rights reserved.
Geeking out with JavaScript
First, how many of you have written JavaScript before?
©2013 Tableau Software Inc. All rights reserved.
Debugging
http://your-server-here/javascripts/api/tableau_v8.debug.js>
©2013 Tableau Software Inc. All rights reserved.
Synchronous vs. Async
• If it’s asynchronous, it ends in Async
• Async calls say “go do this and report back”
• Sync calls say “do this while I wait”
©2013 Tableau Software Inc. All rights reserved.
The fun stuff is Asynchronous
If you want asynchronous things to happen in an order,
you need to chain them together. It looks a little like this:
sheet.applyFilterAsync(a, b ,c)
.then(function () {
return sheet.selectMarksAsync(x, y);
})
.then(function() {
return sheet.applyRangeFilterAsync(r, v);
})
.otherwise(throwError)
.always(doSomethingElse);
©2013 Tableau Software Inc. All rights reserved.
The fun stuff is Asynchronous
Or, you can use event handlers, like this:
handler = function(marksEvent) {
// do some stuff here when marks are selected
}
viz.addEventListener(
tableauSoftware.TableauEventName.marksselection,
handler);
// or maybe you can let the user select marks
sheet.selectMarksAsync(x, y,
tableauSoftware.SelectionUpdateType.REPLACE);
©2013 Tableau Software Inc. All rights reserved.
Async Demo Time
©2013 Tableau Software Inc. All rights reserved.
Want to know more? Go to these sessions!
• Using the JavaScript API at the National Heritage
Academies (Today, 4 – 5)
• You did WHAT with the JavaScript API? (Tomorrow,
3:15 – 4:15)
• Infinite Interactivity with the JavaScript API
(Wednesday, 9:45 – noon)
©2013 Tableau Software Inc. All rights reserved.