Issuse on Click event in google org chart.

selva

unread,

Sep 21, 2012, 9:03:06 AM9/21/12

to google-visua...@googlegroups.com

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>

asgallant

unread,

Sep 21, 2012, 11:50:43 AM9/21/12

to google-visua...@googlegroups.com

When you click a node a second time, it deselects the node, so when you click the node and then click the + sign, there is no selection to grab. There are two ways to handle this:

1) clear the selection after a user selects the node (this happens in your + sign event handler, but not in the node itself)

2) track the previously selected node, and if the current selection is empty, expand/collapse the previous node

Also of note, your code adds another event listener to the div every time the node is clicked, which is entirely unnecessary and will slow down the application if users expand and collapse a node repeatedly. Use the jQuery #on method to assign event handlers to your + signs once. Here's one way of doing it: http://jsfiddle.net/asgallant/w8Ytq/

selva

unread,

Sep 24, 2012, 12:37:26 AM9/24/12

to google-visua...@googlegroups.com

Thank you so much for your valuable answer, and one more think i want to add this chart. When i expand this nose, that + sign(image) change to - sign(image) and similar to collapse on inverse process. Is it possible?

asgallant

unread,

Sep 24, 2012, 2:19:57 AM9/24/12

to google-visua...@googlegroups.com

This is a bit trickier, as the expand/collapse doesn't trigger a full redraw - it works with the data as of the moment the draw call was originally made. So if you change the img src in javascript, it gets rewritten when you expand/collapse. If you change it in the DataTable, it doesn't take the change into account. The end result is that you have to change it in the DataTable and manually trigger a redraw, which necessitates re-collapsing all of the nodes which should be collapsed. Here's a working example: http://jsfiddle.net/asgallant/w8Ytq/1/

selva

unread,

Sep 24, 2012, 10:54:59 AM9/24/12

to google-visua...@googlegroups.com

Thank you so munch. Its working very nice. Here I added some css.

http://jsfiddle.net/w8Ytq/2/

asgallant

unread,

Sep 24, 2012, 12:37:33 PM9/24/12

to google-visua...@googlegroups.com

You're welcome.

Reply all

Reply to author

Forward