select handler - on chart - to do a jquery ajax call (or equivalent)

[SkyWalker]

I have a chart that draws using data from coldfusion query. The cfquery and other code to get the array populated from the query data is not shown here. All the relevant script code is enclosed. 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. How 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>

[SkyWalker]

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.

[SkyWalker]

Easy fix. Just had to assign the cf context variable to a jscript variable and use it. Works great.

On Wednesday, January 28, 2015 at 8:46:54 AM UTC-6, SkyWalker wrote:

[Daniel LaLiberte]

Glad to hear you got it working.  We are not able to offer much help regarding jQuery or coldfusion, so it is good that you figured it out, and posted your update.  You might help others with similar issues.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA