Formatting Text in Visualization Org Chart

[Pete]

Hello,

I was wondering if anyone has any tips for formatting text within an
org chart. For example, in a box I would like to have something like:
Position
Name
Phone
Email

So I guess a good place to start would be how to simply add a line
break. Any help is appreciated.

Thank you.

[VizGuy (Google)]

Currently this is not possible. It could be a nice improvement to
support HTML inside an orgchart box.

[Pete]

Thanks for the quick reply.

I'm assuming there is no way to extend that control or add to it?

[VizGuy (Google)]

Currently there isn't. Thinking outloud how to address this: what if
the control would allow you to set a renderer that is called with a
row number, and draws (returns an HTML string)the inner part of the
element? Will that work for what you need ?

[mark mclaren]

I have resorted to a very nasty hack in order to get the
Organizational Chart visualization component displaying HTML (although
not all HTML seems to work).

http://mark.mclaren.googlepages.com/orgChartGoogle.html

Would it be possible to make the JavaScript source code for the
Visualization API components available without obfuscation? I think
developers of new visualizations would love to see how the masters do
it in plain code. Obfuscating the code means that people with
existing experience of say the Google Maps API are discouraged from
contributing.

Mark

[VizGuy (Google)]

Mark, this is beautiful !
The obfuscation is done to make the JS more compact and faster to
load. I'll try and get an open-source version out as well. I will also
check the option for providing a custom node renderer, which should
make your solution less hackey.

[Pete]

Wow, nice job Mark. You're right I would like to see how the masters
do it, VizGuy open source would be nice. I've been looking for a nice
org chart component for a while and I think this is the best tool I've
found so far, although I understand it is in its early stages. Thanks
for all the great feedback.

> > > > > > Thank you.- Hide quoted text -
>
> - Show quoted text -

[Pete]

VizGuy, I think that would be a great improvement. Being able to
inject HTML would provide a lot of flexibility and enable developers
to apply visual elements such as color to better demonstrate the
organization structure. Thanks again for the quick feedback.

[adam]

Hello OrgChart enthusiasts!

I've been searching high and low for a good org chart solution for one
of the companies I work with.

I have hacked google's org chart visualization into submission,
following on from Mark's neat tip, and come up with the following:

http://sandpit.reitsma.net.au/googleOrg/OrgChartTest.html

One neat update to the visualisation is that in the last two weeks or
so, the org chart structure is determined by the cell value only -
prior to that it was the cell value AND formatted value. This means
that the manager code (column 2) just needs to have the value, and
does not have to be formatted.

This version I've made is enhanced with jQuery - definitely not the
best choice for this case, but it's what I'm comfortable with!
Clicking on an org chart member with hidden direct reports will load
and display them. clicking on the "^" will find the person's manager.

An additional query is done to present the table below the org chart.
You can select as many rows as you like, and then click 'load org
chart' to re-create an org chart with the selected divisions.

finally, select IMR > NSW for an example of using alternate styling on
the org chart.

If anyone would like to add to, or clean up this code, feel free!

--adam--

[Google VizGuy]

Hey Adam, this look nice. A few things you should be aware of:
- There is a new option 'allowHtml'. If you set it to true, you can put in the formatted value any HTML and it will be displayed in the node. I guess you already know about this
- We plan to load a new version on Monday that will use the formatted value (if defined). The fact it is not use now is a bug. The matching of a node name to parent name will be based on the value, while the output will be based on the formatted value.

[Sarah]

I'd like to use this "allowHtml" in my tables, but I haven't been able
to find the documentation (http://code.google.com/apis/visualization/
documentation/reference.html) that references it. Is this released
and if so, do I set it per row or per table?

Thanks!

On Jul 17, 10:05 pm, "Google VizGuy" <viz...@google.com> wrote:
> Hey Adam, this look nice. A few things you should be aware of:
> - There is a new option 'allowHtml'. If you set it to true, you can put in
> the formatted value any HTML and it will be displayed in the node. I guess
> you already know about this
> - We plan to load a new version on Monday that will use the formatted value
> (if defined). The fact it is not use now is a bug. The matching of a node
> name to parent name will be based on the value, while the output will be
> based on the formatted value.
>

[Google VizGuy]

allowHtml is an option to a few visualizations, not all. It is documented per visualization that supports it. For example, the org chart:

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

[rick]

How do you use the allowHtml. I can not figure out how to add it to
the code.
I have tried
allowHtml (true);
but it gives me an error.
So how do you write it and where do you put it.

[adam]

the documentation refers to it here:
http://code.google.com/apis/visualization/documentation/gallery/orgchart.html#Methods

so it would be something like this:

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

[rick]

On Aug 6, 2:55 pm, adam <a.reit...@gmail.com> wrote:
> the documentation refers to it here:http://code.google.com/apis/visualization/documentation/gallery/orgch...

>
> so it would be something like this:
>
> table.draw(data, {allowHtml:true});

Using The example they provide I added it at the bottom and it creates
an error


<html>
<head>
<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();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addRows(5);
data.setCell(0, 0, 'Mike');
data.setCell(1, 0, 'Jim');
data.setCell(1, 1, 'Mike');
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 'Mike');
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 'Jim');
data.setCell(4, 0, 'Carol');
data.setCell(4, 1, 'Bob');

var table = new
google.visualization.OrgChart(document.getElementById('chart_div'));
table.draw(data, {allowHtml:true}); <-- Added it here
}
</script>
</head>

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

[adam]

i put your code into a new HTML file, removed some line breaks, and it
worked fine...
here's an example for you:

<html><head>
<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();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addRows(5);
data.setCell(0, 0, 'Mike');

data.setCell(1, 0, 'Jim','<h1>jim</h1>');

data.setCell(1, 1, 'Mike');
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, 'Mike');
data.setCell(3, 0, 'Bob');
data.setCell(3, 1, 'Jim');
data.setCell(4, 0, 'Carol');
data.setCell(4, 1, 'Bob');
var table = new
google.visualization.OrgChart(document.getElementById('chart_div'));
table.draw(data, {allowHtml:true});
}

</script></head>
<body><div id="chart_div"></div></body>
</html>

[rick]

Thanks It works Now

[DaveH]

I love all of this org chart stuff, does anyone have a working new one
that we can add in as a gadget that can contain data from multiple
columns like what was shown earlier? I need to add department names
and job titles? The other thing that is desperately needed is to have
the leaf nodes be stacked vertically under their manager versus
horizontally because of the width of the organization, etc. Any
ideas?

On Aug 6, 11:35 pm, rick <market...@easycontactpro.com> wrote:
> Thanks It works Now

[angus]

I'm wondering the same thing. Would be great to have a an option for a
particular node's children to be horizontal or vertical. Or even
display off both sides of a vertical line for larger groups of leaves
at the bottom.

Another solution might be as simple as a way to make wide, horizontal
groups different levels, like inserting an empty spacer node. I did
that but you still get the blue background. If it was possible to give
that empty node a flag so that it displayed as an line downwards
instead of a box that would almost work.

Did anyone ever de-obfuscate the code to know any CSS styling
possibilities? Other color options than blue?

[TheViz]

We've added color schemes and multiple column data on nodes to our feature list. The horizontal/vertical group feature request is a bit harder so please expect longer time frames on us addressing this issue.

Also, as a general comment, it is not recommended to reverse engineer the packages in order to uncover hidden features, etc.
First, if there are hidden features, obviously they are not ready for production and not released. Therefore, assuming they remain going forward is a bad assumption. Things may break. Second, it violates the terms of service. Not cool.

If you find meaningful features missing, going ahead and creating a new visualization and publishing your work is highly encouraged. We and the community will thank you for contributing back :-)

[SangR]

Hi,

The GWT Visualization OrgChart has evolved with the described "allowHtml" feature. I am using OrgChart using the GWT Visualization API with the allowhtml set. Using this allowHtml option i am embedding a div element with an image in a OrgChart node. Now, using GWT Visualization API, is it possible to attach a click event handler for this image in the OrgChart node? Basically, i am adding a bunch of images to each node in the OrgChart and want the individual click handlers to be attached to them which gets called to do some work. The only event now that gets fired is the SelectEvent which only refers to the underlying table. 

Please let me know if you need more details. Any information regarding how to accomplish this is appreciated!

Thanks!

[SangR]

Just wanted to highlight that i am using the GWT wrapper for Visualization API and that is where i am facing the problem of attaching handlers to the html elements. 

[asgallant]

I'm not sure how this would work in GWT, but using pseudo-code, you would do something like this:

attach "ready" event listener to OrgChart ->

    when "ready" fires, search for <img> elements in OrgChart -> 

        attach "click" event handler to each <img> element

[SangR]

I did exactly that: however i had to make the html element into a GWT widget before i can attach any event handler to it. This however does not seem to get invoked. Is this because the GWT element made out of the html element is not part of the DOM? If that is correct, is there a way to access the table behind the OrgChart to do just that, meaning set the widget in the appropriate row, column(<td> element in the table)? Any ideas? 

@Override

public void onReady(ReadyEvent event) 

{

Element imgElement = (Element)DOM.getElementById(<ImgElementID>);

createImgEventhandler (imgElement); 

}

private void createImgEventhandler (Element imageElement)

{

String imageHTML = imageElement.getInnerHTML();

Button plusButton = new Button (imageHTML, new ClickHandler()

{

@Override

public void onClick(ClickEvent event)

{

//Take some action

}

});

}

[Ramadurai, Sangeetha]

In order to attach event to an html element rendered in org chart i finally did the following and it works. Might be of help if someone is looking for a similar approach.

BTW, all these happens when the ready event fires for the OrgChart. 

I wrote a JSNI call to get hold of the specific html element by its id. The below call will give a JavaScriptObject

private native JavaScriptObject getJSElement() /*-{

return $doc.getElementById("123");

}-*/;

Now make a GWT element out of this JavaScript Object and then attach event listener to this GWT element. This actually does attach a listener to the underlying html element.

JavaScriptObject jsObject = getPlusJSElement();

if (Element.is(jsObject))

{

com.google.gwt.dom.client.Element jsElement = Element.as(jsObject);

Event.setEventListener(jsElement, new EventListener() {

@Override

public void onBrowserEvent(Event event) 

{

System.out.println("Mouse Click event on html Element 123 !!!");

}

});

Event.sinkEvents(jsElement, Event.ONCLICK);

}

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ueJnUiPQZS0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.