Tableau_JavaScript/Basic_Embed_Tutorial.html at master · Bonnie-android/Tableau_JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head><title>Tableau JavaScript In Action Video</title>
   <link href = "http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"/>
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

   <script type="text/javascript" src="http://public.tableau.com/javascripts/api/tableau-2.js">
   </script>
   <script type="text/javascript">

      var viz;
      window.onload = function () {
//on page load load these references
//first refernce the DIV then reference the URL then add the options
         var vizDiv = document.getElementById('myViz');
         var vizURL = 'https://public.tableau.com/profile/mkovner#!/vizhome/Presents/TreeMap';
         var options = {
            width : '600px',
            height : '600px',
            hideToolvar : false,
            hideTabs : false
         };

         viz = new tableau.Viz(vizDiv,vizURL,options);
      };

      function switchView(sheetName) {
      //switches tab
         var workbook = viz.getWorkbook();
         workbook.activateSheetAsync(sheetName);
      };

      function selectMarks(filterName,values) {};

      function show(filterName,values) {};
   </script>
</head>
<body>
   <div class="container">
      <div class="row">
         <div class="span3">LOGO HERE</div>
         <h2 class="span7 pagination-centered">JavaScript In Action</h2>
      </div>

      <div class="row">
         <ul id="menu" class="nav nav-list span2">
            <!-- Menu List here -->
            <li class="nav_header">Switching Views</li>
            <li><a onClick="switchView('LineChart')">LineChart</a></li>
            <li><a onClick="switchView('Treemap')">TreeMap</a></li>
            <li><a onClick="switchView('WordCloud')">WordCloud</a></li>

            <li class="nav-header">Filtering & Selecting Marks</li>
            <li><a onClick="show('Category','Book')">Show Books</a></li>
            <li><a onClick="selectMarks('Category','Electronics')">Select Electronic Marks</a></li>
         </ul>

         <div id="myViz"></div>
      </div>
   </div>
</body>
</html>