Is it possible to set scope when running an event in google visualization?

16 views
Skip to first unread message

Robert Mason

unread,
Nov 7, 2016, 11:55:17 AM11/7/16
to Google Visualization API
I have an Object that handles all of my page events, I decided to go that way instead of just writing a bunch of functions to help save on GC. I am having a bit of a problem though, it seems that when an event listener is fired there is no way to set scope. So, I have my Object "PageHandler" inside of it there is a function "pageChange", that is to be called whenever the visualization table gets its page changed, so I can re-setup actions on the items in the table. Everything was seemingly working fine until I needed to switch the page from just using a Table type of chart, to using a Dashboard, so that my users could search the table. Now that I have it setup as a Dashboard, I have my "ready" event setup to run a function that attaches the rest of the event functions on the table itself, since you can't access a Wrappers chart until after the dashboard ready event. That is just written as a standalone function, inside of which I instantiate my new Object and attach the page event, like so...

function setup() {
    page = new PageHandler();
    google.visualization.events.addListener(page.getChart(), 'page', page.pageChange);
}

That is an extremely simplistic version of the function, but you get the idea.  The problem comes in pageChange, there is no scope. Here is a very...very simple snippet that will represent this...

var PageHandler = function() { }
PageHandler.prototype = {
    getChart: function() {
        return dash.dashboardParts.mainTable.getChart();
    },
    pageChange: function() {
        console.log(this);
    }
}

now dash is my object, and dashboardParts.mainTable is new google.visualization.ChartWrapper({...}); so I am using getChart on it to get the underlying table chart. The problem is, inside pageChange when I console.log(this); it is logging undefined.

Is there any possible way to allow for proper scoping of the functions getting run when the event handler is called? I have had to do some pretty terrible workarounds that I really do not want to ever have in a production environment, but I have to have scope somehow. Any help would be greatly appreciated. Thank you.

Daniel LaLiberte

unread,
Nov 7, 2016, 1:43:35 PM11/7/16
to Google Visualization API
It appears you could simply use a function wrapper around your page.pageChange function, like this:

  google.visualization.events.addListener(page.getChart(), 'page',  function() {
    page.pageChange();
  });


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/89358907-4bb8-4018-b797-39dd51b5dde3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages