<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="//online.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <h1>Tableau JavaScript API Sample</h1>
    
    <h2>Custom UI</h2>
    <select data-js="sheets-group"></select>

    <hr width="100%" />

    <h2>Tableau View</h2>
    <div data-js="tableau-root" style="display: block;"></div>
    
  </body>

</html>

(function(){
    /**
     * Viz オブジェクト
     * @property viz
     * @type {Object}
     */
    var viz;
    /**
     * WorkBook オブジェクト
     * @property workbook
     * @type {Object}
     */
    var workbook;
    /**
     * アクティブな Sheet オブジェクト
     * @property activeSheet
     * @type {Object}
     */
    var activeSheet;
    /**
     * Viz クラスの初期化処理
     * @method initializeViz
     */
    var initializeViz = function () {
      var SELECTORS      = {
        'TABLEAU_ROOT' : '[data-js=tableau-root]',
        'SHEETS_GROUP' : '[data-js=sheets-group]'
      };
      var $body               = $('body');
      var placeholderDiv      = $body.find(SELECTORS.TABLEAU_ROOT)[0];
      var $select             = $body.find(SELECTORS.SHEETS_GROUP);
      var url                 = 'http://public.tableau.com/views/CMAdventCalendar2014-Histgram/sheet4_1';
      var selectChangeHandler = function() {
          workbook.activateSheetAsync( $select.val() );
      };
      var options = {
          'hideTabs'           : false,
          'hideToolbar'        : true,
          'onFirstInteractive' : function () {
              workbook      = viz.getWorkbook();
              var sheetsInfo = workbook.getPublishedSheetsInfo();
              $.each(sheetsInfo, function(i, sheetInfo) {
                $select.append('<option>'+ sheetInfo.getName() + '</option>');
              });
          }
      };
      viz = new tableau.Viz(placeholderDiv, url, options);
      $body.on('change', SELECTORS.SHEETS_GROUP, selectChangeHandler);
    };
    $(initializeViz);
}());
/* Styles go here */