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]<javascript:> > > 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.
