Organizational Chart + JQuery ToolTip

Antonias

unread,

Sep 15, 2011, 9:26:50 PM9/15/11

to Google Visualization API

Hi, I am using the "Organizational Chart" to show my organization, but
now I try to combine it with the "ToolTip" of "jQuery" to display more
information without distorting the chart, however, does not work
correctly.

Tooltip.js extension returns the following error.

---error---
Detalles de error de página web
Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1;
WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR
3.5.30729; .NET CLR 3.0.30729; Media Center PC
6.0; .NET4.0C; .NET4.0E)
Fecha: Fri, 16 Sep 2011 02:10:52 UTC
Mensaje: 'nodeType' es nulo o no es un objeto
Línea: 149
Carácter: 4
Código: 0
URI: http://localhost/ApDesMV/js/tooltip/jquery.tooltip.js
Mensaje: 'nodeType' es nulo o no es un objeto
Línea: 149
Carácter: 4
Código: 0
URI: http://localhost/ApDesMV/js/tooltip/jquery.tooltip.js

---fin error---

This is the code

[code]

<html>
<head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"
language="javascript"></script>
<script type="text/javascript" src="js/tooltip/jquery.bgiframe.js"
language="javascript"></script>
<script type="text/javascript" src="js/tooltip/jquery.delegate.js"
language="javascript"></script>
<script type="text/javascript" src="js/tooltip/
jquery.dimensions.js" language="javascript"></script>
<script type="text/javascript" src="js/tooltip/jquery.js"
language="javascript"></script>
<script type="text/javascript" src="js/tooltip/jquery.tooltip.js"
language="javascript"></script>
<script type='text/javascript' src='https://www.google.com/
jsapi'></script>
<script type="text/javascript">
$(function () {
$('#a2').tooltip({
delay: 0,
showURL: false,
bodyHandler: function () {
return $("<img/>").attr("src", this.src);
}
});
$('#a3').tooltip({
delay: 0,
showURL: false,
bodyHandler: function () {
return $("<img/>").attr("src", this.src);
}
});
});

</script>
<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: '1', f: 'Mike <div id="a2"><img src="Stylos/
AngloStyle/icon_rss.gif" width="40" /></div>' }, '', 'The President'],
[{ v: '2', f: 'Jim<div id="a3" style="color:red; font-
style:italic">Vice President</br><img src="Stylos/AngloStyle/
icon_rss.gif" width="30" /></div>' }, '1', 'VP'],
['Alice', '1', ''],
['fernando', '1', ''],
['Bob', '2', 'Bob Sponge'],
['Bob1', '2', 'Bob Sponge'],
['Bob2', '2', 'Bob Sponge'],
['Bob3', 'fernando', 'Bob Sponge'],
['Bob4', 'fernando', 'Bob Sponge'],
['Bob5', 'fernando', 'Bob Sponge'],
['Carol', 'Bob', 'comentaroi']
]);
//data.setRowProperty(2, 'style', 'border: 1px solid
green; color: blue');

var chart = new
google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, { allowHtml: true, allowCollapse: true,
selectionColor: '#00ff00', size: 'small' });
//chart.collapse(1, true); //colapsa el nodo 1 por defecto
}
</script>
</head>

<body>
<div id='chart_div'></div>
</body>
</html>

[/code]

Can anyone help?

asgallant

unread,

Sep 16, 2011, 9:25:02 AM9/16/11

to google-visua...@googlegroups.com

My guess is that your jQuery is running before the org chart has drawn, so the "a1" and "a2" divs don't exist yet. You should set up the jQuery tooltips to initialize when the chart fires its ready event. Remove the jQuery function that executes on page load and add this to your draw function, between the chart object declaration and the draw call:

google.visualization.events.addListener(chart, 'ready', function() {
$('#A2').Tooltip({

  delay: 0,
  showURL: false,
  bodyHandler: function() {
  return $("<img/>").attr("src", this.src);
  }
  });

$('#A3').Tooltip({

  delay: 0,
  showURL: false,
  bodyHandler: function() {
  return $("<img/>").attr("src", this.src);
  }
  });
}

There are other issues with the code you posted, most of which I assume are typos from typing out the code here (missing commas and periods mostly). I suspect that your jQuery selector for image tags is invalid as well, but I could be wrong about that. There could also be some conflicts with the vizualization API's native tooltip functionality.

Is there some particular reason you want to use jQuery's tooltips instead of the visualization API's?

Antonias

unread,

Sep 16, 2011, 3:00:10 PM9/16/11

to Google Visualization API

Hello, I will try what you say.
And no, there is no particular reason why I did not use the
Visualization API
in fact, did not know them

Antonias

unread,

Sep 16, 2011, 7:37:01 PM9/16/11

to Google Visualization API

Thanks, your answer helped me, after fighting all afternoon with the
code, I got a solution that leaves me quiet.
instead of displaying the information in the "tooltip", I used the
extension "dialog" from "JQuery" and is quite elegant.

On 16 sep, 09:25, asgallant <drew_gall...@abtassoc.com> wrote:

pryce

unread,

Apr 15, 2014, 4:02:13 PM4/15/14

to google-visua...@googlegroups.com, gabri...@gmail.com

I know this is a fairly old thread but would be able to share the code for how you accomplished the tooltips for the google org chart using jquery dialog? It would be much appreciated, thanks!

Reply all

Reply to author

Forward