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="//online.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            = 'https://public.tableau.com/views/AgeChart/Dashboard1';
      var options        = {
          'hideTabs'           : true,
          'hideToolbar'        : true,
          'onFirstInteractive' : function () {
              workbook = viz.getWorkbook();
              var onSuccess = function(parameters) {
                  console.debug('onSuccess : ', parameters);
                  $.each(parameters, function(index, parameter) {
                      console.log('parameter : ');
                      console.log('parameter.getName() : ', parameter.getName());
                      console.log('parameter.getCurrentValue() : ', parameter.getCurrentValue());
                      console.log('parameter.getDataType() : ', parameter.getDataType());
                      console.log('parameter.getAllowableValuesType() : ', parameter.getAllowableValuesType());
                      console.log('parameter.getAllowableValues() : ', parameter.getAllowableValues());
                      console.log('parameter.getMinValue() : ', parameter.getMinValue());
                      console.log('parameter.getMaxValue() : ', parameter.getMaxValue());
                      console.log('parameter.getStepSize() : ', parameter.getStepSize());
                      console.log('parameter.getDateStepPeriod() : ', parameter.getDateStepPeriod());
                  });
                  workbook
                      .changeParameterValueAsync('YourAge', 36)
                      .then(function(updateParameter) {
                          console.log('updateParameter : ', updateParameter);
                      });
              };
              var onFault = function() {
              };
              workbook
                  .getParametersAsync()
                  .then(onSuccess, onFault);
          }
      };
      try {
          viz = new tableau.Viz(placeholderDiv, url, options);
      } catch(e) {
          console.log('error : ', e);
      }
    };
    $(initializeViz);
}());

/* Styles go here */