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.
