AngularJS Tableau Integration

Shows how to integrate Tableau with AngularJS using a directive Update: with filters

by Prathap Beschi AA

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://public.tableau.com/javascripts/api/tableau-2.0.0.min.js"></script>
<div ng-controller="MyCtrl as myCtrl">

<label for="college">College:</label><br>
<select name="College" ng-model="filters.College">
  <option value="">All</option>
  <option value="Arts & Sciences">Arts & Sciences</option>
  <option value="Business">Business</option>
  <option value="Communication">Communication</option>
  <option value="Education">Education</option>
  <option value="Engineering">Engineering</option>
  <option value="Music">Music</option>
</select><br>

<label for="college">Academic Year:</label><br>
<select name="College" ng-model="filters.Academic_Year">
  <option value="">All</option>
  <option value="2013">2013</option>
  <option value="2014">2014</option>
</select>

<tableau-viz height="'500px'" url="'https://public.tableau.com/views/RegionalSampleWorkbook/College?:embed=y'" filters="filters"></tableau-viz>
</div>

JavaScript

//Module myApp
angular.module('myApp', ['angular-tableau']);

//Controller
angular.module('myApp').controller('MyCtrl', function ($scope) {
    var vm = this;
    $scope.filters = {
    	College: '',
      Academic_Year: ''
    };
})

//Directive
angular.module("angular-tableau",[])
    .value('tableau',tableau)
    .directive('tableauViz', ['$q','$interval','tableau',function($q,$interval,tableauApi) {
        return {
            restrict: 'E',
            template:'<div></div><div style="position: absolute; top:0; height:100%; width:100%; opacity: 0;"></div>',
            scope: {
                url: '=',
                height: '=',
                width: '=',
                filters: '='
            },
            link: function(scope,element,attrs) {
                // Just some housekeeping since the browser won't know how to style this element
                element.css('display', 'block');
                element.css('position', 'relative');
                // Set target for viz
                var vizTarget = element[0].children[0];
                var viz;
                // Block user input if cover is specified
                if(!('cover' in attrs)) {
                    var cover = angular.element(element[0].children[1]);
                    cover.css('display','none');
                }
                // We need to have a URL to do anything
                if(!scope.url) {
                    console.log("Error: No URL was specified for Tableau Viz");
                    return;
                }
                // Create the dashboard
                function createViz() {
                    viz = new tableauApi.Viz(vizTarget, scope.url, {
                        'height': scope.height ? scope.height : '100%',
                        'width': scope.width ? scope.width : '100%',
                        'hideTabs': 'showTabs' in attrs ? false : true,
                        'hideToolbar': 'showToolbar' in attrs ? false : true,
                 ...