Tableau JavaScript API Sample

<!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="//public.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script src="script.js"></script>
  </head>

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

    <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=fields-info]');
      var url = 'http://public.tableau.com/views/CMAdventCalendar2014-Histgram/sheet4_1';
      var options = {
        'hideTabs'           : false,
        'hideToolbar'        : false,
        'onFirstInteractive' : function () {
          console.log('onFirstInteractive');
          var customViewLoadHandler = function(event) {
              console.log('customViewLoadHandler : ', event);
          };
          var customViewRemoveHandler = function(event) {
              console.log('customViewRemoveHandler : ', event);
          };
          var customViewSaveHandler = function(event) {
              console.log('customViewSaveHandler : ', event);
          };
          var customViewSetDefaultHandler = function(event) {
              console.log('customViewSetDefaultHandler : ', event);
          };
          var filterChangeHandler = function(event) {
              console.log('filterChangeHandler : ', event);
          };
          var marksSelectionHandler = function(event) {
              console.log('marksSelectionHandler : ', event);
          };
          var parameterValueChangeHandler = function(event) {
              console.log('parameterValueChangeHandler : ', event);
          };
          var storyPointSwitchHandler = function(event) {
              console.log('storyPointSwitchHandler : ', event);
          };
          var tabSwitchHandler = function(event) {
              console.log('tabSwitchHandler : ', event);
          };
          var vizResizeHandler = function(event) {
              console.log('vizResizeHandler : ', event);
          };
          var EventType = tableau.TableauEventName;
          viz.addEventListener(EventType.CUSTOM_VIEW_LOAD,        customViewLoadHandler);
          viz.addEventListener(EventType.CUSTOM_VIEW_REMOVE,      customViewRemoveHandler);
          viz.addEventListener(EventType.CUSTOM_VIEW_SAVE,        customViewSaveHandler);
          viz.addEventListener(EventType.CUSTOM_VIEW_SET_DEFAULT, customViewSetDefaultHandler);
          viz.addEventListener(EventType.FILTER_CHANGE,           filterChangeHandler);
          viz.addEventListener(EventType.MARKS_SELECTION,         marksSelectionHandler);
          viz.addEventListener(EventType.PARAMETER_VALUE_CHANGE,  parameterValueChangeHandler);
          viz.addEventListener(EventType.STORY_POINT_SWITCH,      storyPointSwitchHandler);
          viz.addEventListener(EventType.TAB_SWITCH,              tabSwitchHandler);
          viz.addEventListener(EventType.VIZ_RESIZE,              vizResizeHandler);
        }
      };
      try {
          viz = new tableau.Viz(placeholderDiv, url, options);
      } catch(e) {
          console.log('error : ', e);
      }
    };
    $(initializeViz);
}());

/* Styles go here */