3 Replies Latest reply on Nov 27, 2017 6:26 AM by Jaroslaw Cieslak

    How to properly catch events using JS API?

    Jaroslaw Cieslak

      Hello all,


      I'm trying to embed a Talbeau viz into a JS application and everything works fine. However I started to wonder what's the proper way of handling a scenario where I want to send a piece of data from the Viz to a javascript web application. I managed to catch some events using following code. Now when I click on my viz I catch the event, but not always get the event's data. In case of a table I imagine that when clicking on a table row I should get the table row data together with the event. That's happening only when I click on the last column and not on the other ones. The difference is that the last column shows some small hover box when clicking on it. Does anyone know how to send the same data when clicking on other places in a table row?




      let containerDiv = document.getElementById('vizContainer');
      let options = {

        width: '100%',
        height: '100%',
        hideTabs: true,
        hideToolbar: true,
        onFirstInteractive: function () {



      let viz = new tableau.Viz(containerDiv, this.link, options);
      viz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, function (mark) {

        mark.getMarksAsync().then(data => {

        console.log('Selected mark is:', data);
         if (data && data.length) {

        console.log('Selected mark\'s data:', data[0].getPairs());




      Table (in the attachment)