Allow listening to other events

[pchapman]

Currently one can get a reference to goog.visualization via the promise provided by the pkg attribute. This is great, but it doesn't mean our needed chart type has been loaded. If something similar could be implemented for the chart constructor or instance, that'd be awesome. Then we could also take advantage of the full range of events that are provided by each chart type (ie., mouseovers, ready, error, etc...).

myChart.chart.then(function(chartInstance, viz) {
// viz is equivalent to google.visualization
viz.events.addEventListener(chartInstance, 'onmouseover', this.doFoo);
});

Alternatively, provide a way to register listeners on whichever events are desired.

[wesalvaro]

I think your latter suggestion is more inline with the way it should work. Especially when we switch over to the ChartWrapper approach. The visualization module is exposed currently for being able to create a DataTable/DataView/DateFormat/etc.

I think it makes a lot of sense to expose a way to listen to other events, though.

I would actually suggest probably just using the normal Polymer event system via translation of all the available events. There seems to only be about 5. Alternatively, there could be a getter that would lazily attach the events:

chart.onMouseOver((event) => { ... });

[wesalvaro]

I've added the new loader which attaches events to a chart object in #124, but it still needs some work to be used outside of the googleChart element.

[wesalvaro]

I think probably the best idea is to add an Array property events that will attach the proper events whenever a chart gets created.

<google-chart events='["onmouseover"]'></google-chart>

This will fire a polymer event google-chart-onmouseover for the chart event onmouseover via loader.fireOnChartEvent(chart, 'onmouseover') during the chart setup.

[wesalvaro]

To add, this new property would address the current lack of support as well as the current workaround of accessing the private chart variable:

ready: function() {
  this.listen(this.$.chart, 'google-chart-ready', '_handleGoogleChartReady');
},

_handleGoogleChartReady: function() {
  this.unlisten(
      this.$.chart, 'google-chart-ready', '_handleGoogleChartReady');
  document.createElement('google-chart-loader')
      .fireOnChartEvent(this.$.chart._chart, 'onmouseover');
},

The above only works if the chart type does not change. If it does (which should be very uncommon) a more complicated setup is required.