<!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.0.1.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/cm-awsmembers-blogposts/sheet0';
      var options = {
          'hideTabs'           : true,
          'hideToolbar'        : true,
          'onFirstInteractive' : function () {
              workbook = viz.getWorkbook();
              activeSheet = workbook.getActiveSheet();
              var onSuccess = function(filters) {
                $.each(filters, function(i, filter) {
                  var fieldName = filter.getFieldName();
                  var filterType = filter.getFilterType();
                  if(filterType === tableau.FilterType.CATEGORICAL) {
                    var applyFilterValues = [];
                    var dataValues = filter.getAppliedValues();
                    $.each(dataValues, function(j, dataValue) {
                      if(typeof dataValue.value === 'string') {
                        var data = dataValue.value;
                        if(data.match(/[a-z]/)) {
                          applyFilterValues.push(data);
                        }
                      }
                    });
                    activeSheet.applyFilterAsync(fieldName, applyFilterValues, tableau.FilterUpdateType.REPLACE);
                  } else if(filterType === tableau.FilterType.QUANTITATIVE) {
                    //TODO:
                  } else if(filterType === tableau.FilterType.HIERARCHICAL) {
                    //TODO:
                  } else if(filterType === tableau.FilterType.RELATIVEDATE) {
                    //TODO:
                  }
                });
              };
              var onFault = function(error) {
                //TODO:
              };
              activeSheet
                .getFiltersAsync()
                .then(onSuccess, onFault);
          }
      };
      viz = new tableau.Viz(placeholderDiv, url, options);
    };
    $(initializeViz);
}());
/* Styles go here */