Works perfectly when I removed any references to cf tags. So, it has to do with cftags and happy to note that jquery and google chart api works together well cleanly.
On Tuesday, January 27, 2015 at 1:01:41 PM UTC-6, SkyWalker wrote: > > I have a chart that draws using data from coldfusion query. The part is > working fine. I am trying to code the select event to make an ajax call to > show more details. Following the google-visualization api example, the > select handler works to throw an alert. Can I use jquery on the select > event? The part without the select event - actually the jquery call to > throw - more details is not working. The other parts work without the ajax > call. Question is "how to mix the jquery ajax with the google chart?" > Thank you > > <script type="text/javascript" src="https://www.google.com/jsapi > "></script> > > <script type="text/javascript" src=" > https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js > "></script> > > > > > <script type="text/javascript"> > // Load the Visualization API and the piechart package. > google.load('visualization', '1.0', > { callback: function() { this.drawChart(); }, > packages: ["corechart"] } ); > > > // Callback that creates and populates a data table, > // instantiates the pie chart, passes in the data and > // draws it. > function drawChart() { > > // Create the data table. > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Jobname'); > data.addColumn('number', 'AvgRunDuration_Lastweek'); > <cfoutput> > data.addRows(#arraylen(jname)#); > </cfoutput> > // add rows from the structure populated above > <cfloop from="1" to="#arraylen(jname)#" index="count"> > data.setValue(<cfoutput>#count#-1</cfoutput>, 0, > '<cfoutput>#jsstringformat(variables.jname[count])#</cfoutput>'); > data.setValue(<cfoutput>#count#-1</cfoutput>, 1, > <Cfoutput>#variables.rtime[count]#</Cfoutput>); > </cfloop> > > // Set chart options > var options = {'title':'Avg Duration (mins) for Jobs', > 'is3D': true, > 'width':300, > 'height':300}; > > // Instantiate and draw our chart, passing in some options. > var chart = new > google.visualization.BarChart(document.getElementById('chartdiv')); > > // The select handler. Call the chart's getSelection() method > function selectHandler() { > var selectedItem = chart.getSelection()[0]; > if (selectedItem) { > var jname_value = data.getValue(selectedItem.row, 0); > alert('The user selected ' + jname_value); > // the part that does not work - mixing > jquery with google-chart > $.ajax({ > type: "POST", > async:true, > url: "jqm_job_runtime_wsteps.cfm", > data: "djobnamespec=" + <cfoutput> #djobnamespec </cfoutput>+ "&djobname=" > + jname_value + "&r=" + Math.random(), > success: function(response) { > $("#jplacehold").html(response); > }, > error: function() { > alert(errMessage); > } > }); > } > } > > // Listen for the 'select' event, and call my function selectHandler() when > // the user selects something on the chart. > google.visualization.events.addListener(chart, 'select', selectHandler); > chart.draw(data, options); > }; > > </script> > -- You received this message because you are subscribed to the Google Groups "Google Chart 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-chart-api. For more options, visit https://groups.google.com/d/optout.
