AngularJS2 receiving event from Google Chart

73 views
Skip to first unread message

Gareth Lewis

unread,
Jan 28, 2016, 11:50:07 AM1/28/16
to Google Visualization API
I'm trying to retrieve an event from Google Charts when the user selects a section of a Pie Chart, and the chart is inside an Angular JS 2 component.

These lines set up the graph and event handler.

this.chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(this.chart, 'select', this.mySelectHandler);

In a standard Javascript application, i.e. one not using Angular JS 2, the event handler will be fired and you can retrieve information from the datatable.

mySelectHandler() {
    console.trace();
    console.log("Chart: " + this);
    let selectedItem = this.chart.getSelection()[0];
    if (selectedItem) {
      let value = this.data.getValue(selectedItem.row, 0);
      console.log("The user selected: " + value);
    }
  }

In Angular JS 2, the method is called, but the code after console.log throws exceptions, as the scope variable, this, doesn't exist.  It appears Google Charts is calling my event handler which is fine, but in a different 'context' so none of the Angular JS 2 fields and methods are available.  Is there any way to 'export' this event through to the Angular JS 2 component?

I've see the AngularJS-Chart directive, but that is for Angular 1 and we aren't even going to look at using that.

Thanks,

Gareth Lewis.
Reply all
Reply to author
Forward
0 new messages