You are absolutely right; that is the exact problem. I should have seen it earlier *facepalm*
Fixed code is here: http://jsfiddle.net/asgallant/Mgj4P/3/ On Tuesday, July 2, 2013 2:45:59 PM UTC-4, Amjad Hawwash wrote: > > Sorry for wrong conclusion earlier. > > Try to add this console log line in fireTrigger function: > console.log('this value =' + this); > > this is returning HTMLSelectElement, does this make a clue? > > On Tuesday, July 2, 2013 6:20:46 PM UTC+3, asgallant wrote: >> >> That would cause the DDListChangeHandler function to execute at the time >> you are creating the event handler, so you would get the alert initially. >> You want to pass the function there, not the returned value of the >> function. >> >> This is an interesting case. I set up a test scenario to see what might >> be going on here: http://jsfiddle.net/asgallant/Mgj4P/2/. If you check >> the console, you will see that the 'ready' event propagates properly and >> the ddlist.fireTrigger call at the end of the script works properly, but >> the event doesn't propagate properly when you change the dropdown. >> >> On Monday, July 1, 2013 6:15:46 PM UTC-4, Amjad Hawwash wrote: >>> >>> Just found the problem... >>> in this line: >>> >>> google.visualization.events.addListener(ddlist, 'select', >>> DDListChangeHandler()); >>> >>> needed to add the parentheses () >>> >>> Thanks for help >>> >>> On Tuesday, July 2, 2013 1:07:47 AM UTC+3, Amjad Hawwash wrote: >>>> >>>> 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.
