[visualization-api] Issuse on Click event in google org chart.

Fri, 21 Sep 2012 06:03:12 -0700 

Here the code i done. That plus icon click works
but when i click the whole box
the plus icon stops work on first click
i debuged the code. the error is 
*TypeError: selection[0] is undefined*
****

*var row = selection[0].row;
*


code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js";></script>
    <script type='text/javascript' 
src='https://www.google.com/jsapi'></script>
.plus{
position: relative;
    top: 0px;
    height: 0px;
}
</style>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:#196589; 
font-style:italic">President</div><div class="plus"><img 
src="http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'},
 
'', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:#196589; 
font-style:italic">Vice President</div><div class="plus"><img 
src="http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'},
 
'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          [{v:'Bob', f:'Bob<div class="plus"><img 
src="http://1.bp.blogspot.com/-IsfgLDHMUG8/UFxkw3uSMdI/AAAAAAAAApE/3TLxFtPQTBE/s1600/plus.png";></div>'},
 
'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new 
google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
         for (var i = 0; i < data.getNumberOfRows(); i++) {
     chart.collapse(i, true);
    }
  google.visualization.events.addListener(chart, 'select', function () {
   $('div.plus').click(function() {
   var selection = chart.getSelection();
    var row = selection[0].row;
      var collapsed = chart.getCollapsedNodes();
       var collapse = (collapsed.indexOf(row) == -1);
      chart.collapse(row, collapse);
     chart.setSelection();  
  });  });
     }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-visualization-api/-/gxXwKgGI0F0J.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to