I'm using Google Chrome actually, I've just tried your jsfiddle page on Chrome, IE, FireFox, all give the same result, second alert is not reached.
Appreciate your efforts. On Tuesday, July 2, 2013 12:57:56 AM UTC+3, asgallant wrote: > > Vanilla javascript is indeed just plain javascript. If your change didn't > work, then you are probably using Internet Explorer, which doesn't support > the #addEventListener method; you need to use the #attachEvent method > there. See this for a solution that should work in all modern browsers: > http://jsfiddle.net/asgallant/Mgj4P/ > > On Monday, July 1, 2013 5:50:51 PM UTC-4, Amjad Hawwash wrote: >> >> Thanks for replying again. >> >> OK, it seems i'm still begginer in javascript? this is first time I hear >> about "Vanialla" javascript, I think it means the pure javascript? >> >> well, I replaced the Event.observe with the following: >> >> selectdom.addEventListener('change', this.fireTrigger, false); >> >> Still the same result, event is not triggered, or not captured by the >> listener. >> >> Amjad >> >> >> On Tuesday, July 2, 2013 12:30:04 AM UTC+3, asgallant wrote: >>> >>> 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.
