Tableau-JS-API/cancelled -Example_05- With_box_interaction.html at master · dsmdavid/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
<!DOCTYPE html>
<html>
<title>API autorefresh</title>
<!-- Importing Tableau API -->
<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.js"></script>


<body onload="initialize();">

    <div>API embed - Autorefresh every 5 seconds</div>
        <div class="circle" id="countdown"></div>
    <div id="myViz"> </div>
    <div id="markDetails">Information about selected marks displays here.</div>

</body>
<script>

var viz;
var ourInterval = 10000;

    function refreshView(){
        viz.refreshDataAsync();
    }


    function initialize() {

        var placeholderDiv = document.getElementById("myViz");
        var url = "https://public.tableau.com/views/TheTime_0/testboxes?";
        var options = {
            width: 900,
            height: 600,
            hideTabs: true,
            hideToolbar: true,
            onFirstInteractive: function(){
                listenToMarksSelection();
            }
        }
        viz = new tableau.Viz(placeholderDiv, url, options);
        }

    setInterval(refreshView,ourInterval);


var timeleft = ourInterval/1000;
var downloadTimer = setInterval(function(){
  document.getElementById("countdown").innerHTML = timeleft + " ";
  timeleft -= 1;
  if(timeleft <= 0){
    timeleft = ourInterval/1000;
    document.getElementById("countdown").innerHTML = timeleft + " ";
  }
}, 1000);

    /*  Catching Interval Time    */
 function listenToMarksSelection() {
  viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, onMarksSelection);
}

function onMarksSelection(marksEvent) {
  return marksEvent.getMarksAsync().then(reportSelectedMarks);
}

function reportSelectedMarks(marks) {
var html = "";

            for (var markIndex = 0; markIndex < marks.length; markIndex++) {
                var pairs = marks[markIndex].getPairs();
                html += "<b>Mark " + markIndex + ":</b><ul>";
                for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) {
                    var pair = pairs[pairIndex];
                    html += "<li><b>Field Name:</b> " + pair.fieldName;
                    html += "<br/><b>Value:</b> " + pair.formattedValue + "</li>";
                    ourInterval = pair.formattedValue*1000;
                }
                html += "</ul>";
            }
            var infoDiv = document.getElementById('markDetails');
            infoDiv.innerHTML = html;

}


</script>

<style>

.countdown {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  background: #ff00ff;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 100px;
  text-align: center;
  background: #ff00ff
}


</style>
</html>