Tableau JavaScript API improvements Sample

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    
    <h1>Tableau JavaScript API improvements Sample</h1>

    <table>
      <tbody data-js="data-table"></tbody>
    </table>

    <hr width="100%" />
    
    <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 $body          = $('body');
      var placeholderDiv = $body.find('[data-js=tableau-root]')[0];
      var $tbody         = $body.find('[data-js=data-table]');
      var url = 'https://public.tableau.com/views/cm-awsmembers-blogposts/sheet0';
      var options = {
          'hideTabs'           : true,
          'hideToolbar'        : true,
          'onFirstInteractive' : function () {
              var options = {
                'maxRows'           : 10,     // 表示行数 ( 0 === ALL )
                'ignoreAliases'     : false, // 「別名を表示」  無視する / 無視しない
                'ignoreSelection'   : true,  // ビュー内グラフの選択状態を 無視する / 無視しない
                'includeAllColumns' : false  // 「すべてのフィールドを表示」 ON/OFF
              };
              workbook = viz.getWorkbook();
              activeSheet = workbook.getActiveSheet();
              var onSuccess = function(dataTable) {
                $tbody.append('<tr><td>getName() : </td><td>'+ dataTable.getName() + '</td></tr>');
                $tbody.append('<tr><td>getTotalRowCount() : </td><td>'+ dataTable.getTotalRowCount() + '</td></tr>');
                $.each(dataTable.getColumns(), function(i, colmn) {
                  $tbody.append('<tr><td>getColumns()[' + i +'] : </td><td>'+ colmn.$0.$1 + '</td></tr>');
                });
                $.each(dataTable.getData(), function(i, data) {
                  $tbody.append('<tr><td>getData()[' + i +'] : </td><td>'+ JSON.stringify(data) + '</td></tr>');
                });
                console.debug('dataTable.getData() : ',      dataTable.getData() );
                console.debug('dataTable.getData() : ',      dataTable.getData() );
              };
              var onFault = function() {
                //TODO:
              };
              activeSheet
                .getUnderlyingDataAsync(options)
                // .getSummaryDataAsync()
                .then(onSuccess, onFault);
          }
      };
      viz = new tableau.Viz(placeholderDiv, url, options);
    };
    $(initializeViz);
}());