How to Track a Storm With the Tableau JavaScript SDK

Visualizations are a useful component of web applications because you can display data, build mental images, and engage your audience. Tableau, the business intelligence and analytics company, explained in this tutorial how to track a storm, exploring path and wind speed by consuming their JavaScript SDK. Note that we refer to the tool as an SDK even though the tutorial refers to it as an API. To understand the reasons for this, please read this article.

To add a storm visualization, first you create a web page, including the JavaScript SDK file from the server that hosts visualizations, then create a div element in the body, followed by writing a function to display a visualization, and calling the function to run the code.

This is the full sample code:

<!DOCTYPE html>
<html>

<head>
     <title>Basic Embed</title>

     <script type="text/javascript"
                src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
     <script type="text/javascript">
         function initViz() {
              var containerDiv = document.getElementById("vizContainer"),
                   url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms",
                   options = {
                       hideTabs: true,
                       onFirstInteractive: function () {
                           console.log("Run this code when the viz has finished loading.");
                       }
                    };

                 var viz = new tableau.Viz(containerDiv, url, options);
                 // Create a viz object and embed it in the container div.
               }
         </script>
</head>
 

<body onload="initViz();">
         <div id="vizContainer" style="width:800px; height:700px;"></div>
</body>

</html>

With the Tableau JavaScript SDK, you can display visualizations, load and resize, select marks, respond to events, and export files as PDF documents. In this case, Tableau shows you how to track a storm, but you can also represent visual data to track flights, show nutrition stats, display college admissions, and monitor stocks.

Original Article

Tableau JavaScript API

Mayela Gonzalez Mayela Gonzalez is a Web Content Editor at ProgrammableWeb.com
 

Comments