OrgChart with bubble text popup

[wenhong ma]

Hi, I am creating a Org Chart for our department, and love the org
chart visualization.

I am trying to have bubble text popup for person in org chart
(mouseover/out), could you give me some help on this?

What I have is at http://www.advancement.ualberta.ca/organizationChart/organizationgooglechart

I have trouble for mouseout to hide popup...

Thanks a lot!

[asgallant]

The visualizations don't have 'onmouseover' and 'onmouseout' events.  You have to register those event handlers on the table's HTML elements using vanilla javascript (or a helper library like jQuery).  You could use the existing tooltips, however, without any special code.  Just add that bubble text to the 3rd column of the DataTable in the row for the particular element.  For example, you could have Sean Price's row in the table as:

['Sean Price', 'ONeal Outar', 'Sean Price joined the University of Alberta...'],

[wenhong ma]

Hi Drew , thank you so much and you are so great! 

I am a database programmer, pretty new to the web develop and I really appreciate your kind help! And thank you for the note.

I will work on it and keep posting...

 

[wenhong ma]

For the org chart, is it possible to have top row in horizontal and next row in vertical to save space like in the attached file? I uploaded the orgchart in ppt.

Thanks!

[MC Get Vizzy]

I think this is not supported.

On Wed, Feb 22, 2012 at 11:46 PM, wenhong ma <wenh...@gmail.com> wrote:

For the org chart, is it possible to have top row in horizontal and next row in vertical to save space like in the attached file? I uploaded the orgchart in ppt.

Thanks!

--
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/-/cebYIbH8VuUJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[wenhong ma]

well, so far I managed to have some popups - only working for IE (using creatwindow)... Could you suggest some html5/ajax library for nice popup description text?

https://cdo.sitecore.ualberta.ca/en/OrganizationChart/OrganizationGoogleChart 

This looks more fun than PL/SQL...And love for any advice.

[asgallant]

Personally, I find popups annoying - if you want something like a popup without the same irritation factor, try lightboxes (Google them).  There are a large number of lightbox scripts or jQuery plugins to choose from (I primarily use PrettyPhoto when I need them).

[wenhong ma]

Thanks again and actually I agree with you so talked to my team lead, we would forget about mouse over (not good for touch device anyway) and use click.  So far I am using slimbox and have a couple questions: 

1. I dont need image so could I just use caption for text?

2. If I use caption, I use escape \  for ", how about quote inside quote like I highlight in the below?

onclick=\'Slimbox.open(\"Outar200x301.gif\", \"She joined the University of Alberta as Associate Vice President's\");return false\' rel=\"lightbox\" >O\'NEIL OUTAR</a>'}, '', 'Chief Officer']

I assume I could customize the css? or some configuration already there? I will take a look at PrettyPhoto.

On Thursday, February 23, 2012 2:00:32 PM UTC-7, asgallant wrote:

Personally, I find popups annoying - if you want something like a popup without the same irritation factor, try lightboxes (Google them).  There are a large number of lightbox scripts or jQuery plugins to choose from (I primarily use PrettyPhoto when I need them).

On Thursday, February 23, 2012 2:00:32 PM UTC-7, asgallant wrote:

Personally, I find popups annoying - if you want something like a popup without the same irritation factor, try lightboxes (Google them).  There are a large number of lightbox scripts or jQuery plugins to choose from (I primarily use PrettyPhoto when I need them).

[asgallant]

You'll have to ask the Slimbox people if you can use just text; I know nothing about it.  PrettyPhoto allows any type of content, if you decide to go with that.

You didn't paste the whole line, but I'm guessing that the outer quotes are single-quotes, so you would not need to escape the double quotes on the inside, but you would need to escape the single-quotes:

onclick=\'Slimbox.open("Outar200x301.gif", "She joined the University of Alberta as Associate Vice President\'s")

I feel kind of stupid right now, because I looked over the Org Chart documentation and to my surprise, the 'onmouseover' and 'onmouseout' events are actually supported.

[wenhong ma]

You are great! I could not thank you enough for helping me so patiently :)

I appreciated that you showed me how to approach if the event is not support, and here is another question: 

Is it possible to resize the org chart to exact width beside small, medium and large? Since my university is using sitecore and limits the width to 700px.  I remember some one was asking the similar question. 

I checked the options at here provided by vizboy.

[wenhong ma]

I am using PrettyPhoto, and I have problem with the link inside   [{v:'O\'NEIL OUTAR', f:'CHIEF ADVANCEMENT OFFICER<br><a href="#inline_demo" rel="prettyPhoto[inline]">O\'NEIL OUTAR</a>'}, '', 'Chief Officer'], and I tested working outside fine -  <a href="#inline_demo" rel="prettyPhoto[inline]" >O\'NEIL OUTAR</a>

Anything I missed? Is it because the link is inside draw? I copied the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

  <head> 

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>  

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

  $(document).ready(function(){

    $("a[rel^='prettyPhoto']").prettyPhoto();

  });

</script>

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script type='text/javascript'>

      var char;

 var newPopup;

      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:'O\'NEIL OUTAR', f:'CHIEF ADVANCEMENT OFFICER<br><a href="#inline_demo" rel="prettyPhoto[inline]">O\'NEIL OUTAR</a>'}, '', 'Chief Officer'],

 [{v:'oud', f:'OFFICE OF UNIVERSITY DEVELOPMENT<div style="color:red; font-style:italic">COLM RENEHAN</div>ASSOCIATE VICE PRESIDENT'}, 'O\'NEIL OUTAR', ''],

 [{v:'oaa', f:'OFFICE OF ALUMNI AFFAIRS<div style="color:red; font-style:italic">SEAN PRICE</div>ASSOCIATE VICE PRESIDENT'}, 'O\'NEIL OUTAR', ''],

 [{v:'oas', f:'OFFICE OF ADVANCEMENT SERVICES<div style="color:red; font-style:italic">KELLY SPENCER</div>SENIOR DIRECTOR'}, 'O\'NEIL OUTAR', ''],

 [{v:'ofd', f:'OFFICE OF FACULTY DEVELOPMENT<div style="color:red; font-style:italic">ANDREA MORRIS</div>SENIOR DIRECTOR'}, 'O\'NEIL OUTAR', ''],

 [{v:'ocdr', f:'OFFICE OF COMMUNICATIONS AND DONOR RELATIONS<div style="color:red; font-style:italic">VACANT</div>SENIOR DIRECTOR'}, 'O\'NEIL OUTAR', '']  

 

]);

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

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

chart.draw(data, {allowHtml:true, size:'small', color:"green", selectionColor:"yellow"} ); 

        //register callbacks

      }     

 

    </script>

  </head>

<body>

    <div id='chart_div' style='width: 700px; background-color:#cccccc;'></div> 

<a href="#inline_demo" rel="prettyPhoto[inline]" >O\'NEIL OUTAR</a>

    <div id="inline_demo" style="display:none;">

 <p><a href="http://www.google.ca?iframe=true&amp;width=1000&amp;height=500">Google.ca</a></p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

  </body>

</html>​

On Friday, February 24, 2012 12:48:08 PM UTC-7, asgallant wrote:

On Friday, February 24, 2012 12:48:08 PM UTC-7, asgallant wrote:

On Friday, February 24, 2012 12:48:08 PM UTC-7, asgallant wrote:

[asgallant]

You need to initialize PrettyPhoto after the org chart has finished drawing, otherwise the links don't exist yet.  Try it this way:

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

google.visualization.events.addListener(chart, 'ready', function () {

    $("a[rel^='prettyPhoto']").prettyPhoto();
});

chart.draw(data, {allowHtml:true, size:'small', color:"green", selectionColor:"yellow"} );

[wenhong ma]

Thanks! That generates the box, but complains about the path not found, I believe the chart won't recognize the div just like you told me before.

[wenhong ma]

well, then I used the load ajax and it works perfectly and so user could update the html file.

<a rel="prettyPhoto[ajax]" href="sample.html?ajax=true&width=300&height=400">O\'NEIL OUTAR</a>

--

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/-/m3U8TITttSUJ.