function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AffinaquestAffinaquest 

Javascript listener event in Google Visualization not working

I've created a component for a Google Visualization orgchart.  Everything in the component seems to work correctly except the Javascript listener event.

 

The code that works correctly looks like this:

<apex:component >

<html>

<head>

<apex:attribute name="jsondata" description="This is the chart data" type="string" required="true" />

 

<apex: outputPanel id="chart_div">

<script type='text/javascript' src='http://www.google.com/jsapi'></script>

<script type='text/javascript'>

     google.load('visualization', '1', {packages:['orgchart']});

     google.setOnLoadCallback(drawChart);

 

     function drawChart() {

     var data = new google.visualization.DataTable(eval( '({!jsondata})' ));

     var chart = new google.visualization.OrgChart(document.getElementById('{!$Component.chart_div}'));

     google.visualization.events.addListener(chart, 'select', selectHandler);

     chart.draw(data, {allowCollapse: true, allowHtml: true});

     }

 

     google.setOnLoadCallback(drawVisualization);

 

 

     function selectHandler(){

     alert('You selected a row.');

     }

 

</script>

 </apex: outputPanel>

</head>

 </html>

</apex:component>

 

However, if I simply add one line of code to the function handler like this:

 

     function selectHandler(){

     var row = chart.getSelection()[0].row;

     alert('You selected a row.');

     }

 

The event no longer seems to work (at least the alert doesn't fire). 

 

I'm trying to capture the row number so that I can add additional rows to the orgchart based upon data in the row selected.

 

Any help or pointers you might be able to give regarding this problem would be greatly appreciated.

 

JR