Help with Org Charts API

[Bjor]

Hello,

I am trying to use the nifty org chart visualization tool. It works
great except a few issues. here is the code so far:

<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:red; font-style:italic">LSS
Department Head</div>'}, '', 'The Big Boss'],
[{v:'Jim', f:'Jim<div style="color:red; font-
style:italic">First in command</div>'}, 'Mike', 'The XO'],
['Alice', 'Jim', ''],
[{v:'Bob', f:'Bob<div style="color:blue; font-
style:italics">LSS Zone 1 Staff</div>'}, 'Jim', 'Bob Sponge'],
['Carol', 'Jim', '']
]);
var chart = new
google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true, allowCollapse:true});
}

function update()
{
var chart = new
google.visualization.OrgChart(document.getElementById('chart_div'));
chart.setSelection(null);
}
</script>

I want to be able to call the function UPDATE(); from events such as
onfocus or onclick. The end goal would be to highlight a certain
person in the org chart based on which image they click on (using
onclick or onfocus) It doesn't seem to work right now. It hasn't been
fully implemented but I can't even get the current update(); function
to deselect anything when I activate the function. I am not sure if I
am handling the update() function properly when I reinitialize the
CHART object. any help or advice how to approach this issue would be
appreciated.

Thanks

[Bjor]

Just to clarify, what I essentially want to know is how to manipulate
the chart after it has been loaded, my javascript foo is a bit weak
currently. I've tried a few different methods such as making the
variables which store the dataTable and the Org chart "global" but it
just broke it all together. How does one go about manipulating the
chart after it has been loaded?

[asgallant]

If you want to manipulate the chart using events outside the chart, I believe the only way to access it is to declare the chart as a global:

var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));

function drawChart() {

...

}

then reference it in your update function:

function update () {

chart.setSelection();

}

[Bjor]

Hmm yes thank you for that, I thought I had tried that before and it
didn't work but I must have not done it properly. It works fine now.
This was a pretty stupid thread to create on my behalf. I should have
figured that out.

[Bjor]

I have another question actually,

I noticed the page for org chart mentions a section for events, is
there an easier way to use them than using this method of embedding it
in the datatable? [{v:'Alice',f:'<div onmouseover = "showMap()";>Alice
</div>'}, 'Jim', '', 'testing'], // row 2

Is the proper way of using the events for this API?

A side question, if I wanted to pass the element ID that the event is
called from using DOM, how would I go about doing that? do I just use
document.thisid or something similar? I want the event to reference
where it was called from.

Thanks,

Chris

On May 18, 12:08 pm, asgallant <drew_gall...@abtassoc.com> wrote:

[asgallant]

onmouseover isn't one of the API's events, and depending on how the chart is embedded in the page, your showMap() function might not be in scope.  If it is, then what you have might work.

If you want to pass a reference to the object calling a function, use <div onmouseover="showMap(this);">, where "this" is a self-reference to the <div>.  That won't get you access to the chart, though.  Maybe if you declare your chart as a global, you could do something like: <div onmouseover="showMap(row, column);">, where row and column are the index values of the table cell.  Then in the showMap() function, you can reference the global chart variable and pull the data you want based on the row and column indices.