tableau_js_api/embed_multiple_viz_framework.html at master · bryanthowell-tableau/tableau_js_api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

<html>
<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://localhost/javascripts/api/tableau-2.min.js'></script>

    <title>JS Multiple Viz Embed</title>
    <style>

        .vizContainer {
            position: fixed;
            height: 600px;
            width: 900px;
            top: 50px;
            left: 200px;
            z-index: 1;
        }

        #cover_div {
            background-color: white;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        // The vizzes to eventually be loaded
        var viz_info = {
            "wb_1" : "Sales/CommissionModel",
            "wb_2" : "Sales/SalesForecast",
            "wb_3" : "Science/GreenLiving"
        };

        var site_content_url = 'default';
        var server = 'http://localhost';
        function build_viz_url(server, site_content_url,view_content_url){
            var full_url;
            if (site_content_url.toLowerCase() == 'default'){
                full_url = server + "/views/" + view_content_url;
            }
            else {
                full_url = server + "/t/" + site_content_url + "/views/" + view_content_url;
            }
            return full_url;
        }

        // Hold the actual Viz objects
        var vizzes = {};

        var workbook_name;
        var view_name;

        var current_viz;
        var book;
        // { viz_name : int }
        // Cover_div always stays at
        var viz_div_z_index = {
            "cover_div" : 2
        };

        var options = {
            // This function runs after the viz is loaded, so all additional API calls should generate from there
            onFirstInteractive : completeLoad,
            toolbarPosition : tableau.ToolbarPosition.TOP
        };

        function assign_viz_div_z_indexes(){
            // Hide all other Viz Containers
            $.each(viz_div_z_index, function (key, value){
               // $("#" + key).hide();
                $("#" + key).css("z-index", value);
                if ( value == 1){
                    $("#" + key).hide();
                }
                else{
                    $("#" + key).show();
                }
            });
        }
        function switch_dashboard(dash_name){
            var viz_div_options = {
                "height" : 800
            }

            // Setting all other viz div z-index potentials down to 1
            $.each(vizzes, function (key, value){

                // cover_div must remain at z-index = 2 so that a larger underlying viz never shows in background
                if ( (key != dash_name) && (key != 'cover_div') ){
                    //$("#" + key).hide();
                    viz_div_z_index[key] = 1;
                }
            });

            // Check if viz has been initiated, if not, create it
            if(vizzes[dash_name]){
                current_viz = vizzes[dash_name];
                //$("#" + dash_name).show();
                // Set the current_viz index high;
                viz_div_z_index[dash_name] = 3;
                //$("#" + dash_name).css("z-index",2);
                assign_viz_div_z_indexes();
            }
            // Create if not initiated
            else {

                console.log('Going to make the viz');
                // Container viz must not be hidden
                new_div = document.createElement("div");
                new_div.id = dash_name;
                new_div.className = 'vizContainer';
                $(new_div).css('z-index',1);
                viz_holder = document.body;
                viz_holder.appendChild(new_div);
                $("#" + dash_name).show();
                // Set the eventual index high
                viz_div_z_index[dash_name] = 3;
                // Initialize the viz
                vizzes[dash_name] = new tableau.Viz(
                    document.getElementById(dash_name),
                    build_viz_url(server, site_content_url, viz_info[dash_name]),
                    options
                );
                active_viz = vizzes[dash_name];
            }
        }

		function completeLoad(e) {
            // Reassign all the z-index to show the right one
            assign_viz_div_z_indexes();

            book = active_viz.getWorkbook();
            v = e.getViz();
            wb = v.getWorkbook();
        }

    </script>
</head>

<body>
<p>
<div id='selection-menu'>
        <ul>
        <li><a onclick="switch_dashboard('wb_1'); return false;" href='#'>View 1</a></li>
        <li><a onclick="switch_dashboard('wb_2'); return false;" href='#'>View 2</a></li>
        <li><a onclick="switch_dashboard('wb_3'); return false;" href='#'>View 3</a></li>
        <ul>

</div>
<div id='cover_div' class='vizContainer'></div>

</body>

</html>