AngularJS Tableau Integration

Shows how to integrate Tableau with AngularJS using a directive

by hmartos

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">
  <tableau-viz height="'500px'" url="'https://public.tableau.com/views/USMassShooting2013-2015TrendsPerState/Story1?:embed=y'" filters="{'field1':['item1', 'item2'], 'dateField':{'min':startDate, 'max':endDate}}"> </tableau-viz>
</div>

JavaScript

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

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

//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,
                        'onFirstInteractive': function() {
                           ...