Event.observe is a feature of the Prototype library, so you have to load Prototype in order to make it work. Prototype doesn't play well with the Visualization API, though, so it is not a good choice for creating visualizations. I would suggest using an alternative library to handle event registration or using vanilla javascript to handle it.
On Monday, July 1, 2013 4:43:52 PM UTC-4, Amjad Hawwash wrote: > > Thanks for replying. > > I'm not trying to do something complicated, it's not triggering events > from outside a chart. > > My custom chart is a drop down list (<select> tag), by it self, which I > fill its' content from DataTable, and I want to trigger the onChange event > using google visualization trigger function. > > I was actually referring to this custom chart: > https://developers.google.com/chart/interactive/docs/dev/?hl=en > > I'm getting data using a data source and query as in here: > https://developers.google.com/chart/interactive/docs/queries > > And I'm trying to fire the event trigger using this: > > https://developers.google.com/chart/interactive/docs/reference?hl=en#trigger > > I think I'm getting close to a solution using Event.observe(...) function > in prototype.js library (here: > https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js ,or > here: http://prototypejs.org/) > > > My code is something like the following: > 1- The custom chart code (dropdownchart.js): > > // declaring name space > > var dropdownchart = {}; > > > > dropdownchart.DropDown = function(container) { >> this.containerElement = container; >> } > > > > dropdownchart.DropDown.prototype.draw = function(data, options) { >> > var selectdom = document.createElement("select"); // create the >> <select> element >> for (var row = 0; row < data.getNumberOfRows(); row++) { // add >> options from data table to select element - loop >> var optiondom = document.createElement("option"); >> var value= ...; // get value from data table >> var text = ...; // get display text from data table >> var textnode = document.createTextNode(text); // create the text node >> optiondom.appendChild(textnode); // append text node >> optiondom.value=value; // set option value attribute >> selectdom.appendChild(optiondom); // append the option to select >> element > > } >> this.containerElement.appendChild(selectdom); // append select element >> to chart container >> Event.observe(selectdom,'change',this.fireTrigger); > > } >> >> dropdownchart.DropDown.prototype.fireTrigger = function() { > > alert('trying to fire change trigger'); // this alert is displayed >> when I change the drop down list selection > > google.visualization.events.trigger(this, 'change', null); > > } >> >> > 2- HTML page to draw the chart > > <html> >> <head> >> <script src=" >> https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js >> "></script> >> <script type="text/javascript" src="https://www.google.com/jsapi >> "></script> > > <script type="text/javascript" src="dropdownchart.js"></script> >> >> <script type="text/javascript"> >> >> google.load('visualization', '1.0'); // here packages is not needed >> // Set a callback to run when the Google Visualization API is >> loaded. >> google.setOnLoadCallback(drawChart); >> >> function drawChart() { >> dropdownlist(); >> } >> >> function dropdownlist() { >> var query = new google.visualization.Query(' ... data source query >> string here ..', null); >> query.setQuery(' ... select query here ... '); >> query.send(handleDDListQueryResponse); >> } >> >> function handleDDListQueryResponse(response) { >> if (response.isError()) { >> alert('Error in query: ' + response.getMessage() + ' ' + >> response.getDetailedMessage()); >> return; >> } >> var data = response.getDataTable(); >> ddlist= new dropdownchart.DropDown(document.getElementById('dropdown')); >> ddlist.draw(data, null); >> google.visualization.events.addListener(ddlist, 'change', >> DDListChangeHandler); // here I register the event listner >> } > > > > function DDListChangeHandler() { >> alert('Drop down list has been changed'); // this line is not reached >> } >> >> </script> >> </head> >> <body> >> >> <div id="dropdown"></div> >> >> </body> >> </html> > > > > Unfortunately, triggering an event or listening to it is not working... > > I hope I made it clear this time. > > Thanks, > Amjad > > > On Monday, July 1, 2013 5:28:58 PM UTC+3, Sergey wrote: >> >> Hi, our charts currently don't support triggering events from outside of >> the chart. I'm not sure what you mean by 'creating a custom visualization'. >> Are you using the Google Visualization charts and wrapping them with your >> own visualization? Are you exposing a class? Or are you trying to modify >> the existing chart div and hook into the chart events? >> >> - Sergey >> >> >> On Sun, Jun 30, 2013 at 4:43 PM, Amjad Hawwash <[email protected]>wrote: >> >>> Hi, >>> >>> I'm creating a custom visualization that includes a drop down list (* >>> <select>* tag), and I want to propagate the onChange event from the >>> drop down list to the custom visualization object using the trigger >>> function. >>> >>> I tried to pass the onChange event through options in draw() function, >>> but the APIs does not allow it. >>> >>> I'm using Element.appendChild() to add the drop down to the >>> visualization container. >>> >>> Help please. >>> >>> Thanks, >>> Amjad >>> >>> >>> >>> >> >> -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/groups/opt_out.
