org chart with images

2,953 views
Skip to first unread message

Billy Bones

unread,
Oct 23, 2012, 4:14:30 PM10/23/12
to google-visua...@googlegroups.com
I have the following ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <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', 'name');
    data.addColumn('string', 'Manager', 'manager');
    data.addRows(3);

    var markLink = img_a("http://www.google.com", "https://LH6.googleusercontent.com/KZ4Ko00-Jk5ADPRvbzrxicPWA3wcodcG-T7cpKhhHWUIkcJi9kEqDTWJo_WDs30IlUQne9WJP7n7beSgmEHEOZXXy7a_AGVmJ543kSZGJYOGYQgKlgpjS54u8oa0sw", "Mark");
    var simonLink = img_a("http://www.google.com", "https://lh4.googleusercontent.com/l90HsT7fW12bAzUCn6ar1DM71nU8jmYZbjSWJV8Or8FGclaBTy3WYgahCy_5rb8_OESBBozaJNcunGFMDvmx44uSGvv_HpQ_NqleQT9CFinLw7tylwRYgBY6D3Cdxg", "Simon");
    var randyLink = img_a("http://www.google.com", "https://lh4.googleusercontent.com/av1ZE7OFWKj4GUGkV_itkAT-fUB3DVsDkN69GgftUKWZpks78BDTNjGcp3uAW-Y-rPQ1wd9WnLfs440NCFsIfQp-W1_Co33vRv0KjqvmV8AY3tHQYOBcz57X8zXM2A", "Randy");

    data.setCell(0, 0, 'Mark', markLink);
    data.setCell(1, 0, 'Simon', simonLink);
    data.setCell(1, 1, 'Mark', markLink);
    data.setCell(2, 0, 'Randy', randyLink);
    data.setCell(2, 1, 'Mark', markLink);

    document.superCreateTextNode = document.createTextNode;
    document.createTextNode = function(data){
        if (typeof data=='object'){
            return data;
        }
        return this.superCreateTextNode(data);
    };

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {});
}

function tag(n,c){
    var e=document.createElement(n);
    if(c) e.appendChild(c);
    return e
}
  
function img_a(href, img, title){
    i=tag('img');
    i.setAttribute("src", img);
    i.setAttribute("border", "0");
    i.setAttribute("height","160");
    i.setAttribute("width","60");
    i.setAttribute("title", title);
    e=tag('a',i);
    e.href=href;
    return e
}
    </script>
    <title></title>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
​

I want it to draw data from the following spreadsheet instead of having the data hard coded.  https://docs.google.com/spreadsheet/ccc?key=0ArzcNGBduYipdEllSmlock5yMmttRnV4UEI4dUpVTFE#gid=0

Like the following one does.  The end goal is to be able to have a spreadsheet that populates the org chart with pictures. I am learning all of this stuff, so please speak slowly.

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["orgchart"]});
    </script>
    <script type="text/javascript">
    var visualization;

    function drawVisualization() {
      // To see the data that this visualization uses, browse to
      
      
      var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheet/ccc?key=0ArzcNGBduYipdEllSmlock5yMmttRnV4UEI4dUpVTFE&range=A3:C40');
    
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }
    
    function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }
    
      var data = response.getDataTable();
      visualization = new google.visualization.OrgChart(document.getElementById('visualization'));
      visualization.draw(data, null);
    }
    

    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" ></div>
  </body>
</html>

asgallant

unread,
Oct 23, 2012, 5:42:26 PM10/23/12
to google-visua...@googlegroups.com
The spreadsheet isn't public, so I can't see it.  If you make it public, I'll take a look and see what you might need to do to make this work.

Billy Bones

unread,
Oct 23, 2012, 6:04:43 PM10/23/12
to google-visua...@googlegroups.com
Thanks! Sorry, it's public now.

Billy

asgallant

unread,
Oct 23, 2012, 6:22:24 PM10/23/12
to google-visua...@googlegroups.com
If you want unique images for every position, the easiest thing to do is to include the image links in a column in the spreadsheet.  You can then use a PatternFormatter to format the first DataTable column to include the image and then use a DataView to filter out the extra link column.  The code might look something like this: http://jsfiddle.net/asgallant/MMAKq/

Billy Bones

unread,
Oct 23, 2012, 7:47:45 PM10/23/12
to google-visua...@googlegroups.com
Thanks a million!

Billy

asgallant

unread,
Oct 24, 2012, 1:18:04 AM10/24/12
to google-visua...@googlegroups.com
You're welcome.

On Tuesday, October 23, 2012 7:47:45 PM UTC-4, Billy Bones wrote:
Thanks a million!

Billy

Project Pelican

unread,
Oct 24, 2012, 1:39:17 PM10/24/12
to google-visua...@googlegroups.com
Follow up question.

If I want those images to also be individual links, is there a way to use the formatter to do that?

for example, the formatter below will send every click to "markdash" but I would like to replace "markdash" with different urls that go with each picture.  Is it possible to have two options built into the formatter?   

var formatter = new google.visualization.PatternFormat('<a href=/markdash><img src="{0}" />');
        // replace the '{0}' in the patter with the contents of column 3 (the links) and put the result in column 0
        formatter.format(data, [3], 0);

I really appreciate all the help! I started this project knowing absolutely nothing about coding and it is all coming together slowly.

Billy

asgallant

unread,
Oct 24, 2012, 1:50:51 PM10/24/12
to google-visua...@googlegroups.com
Yes, you can do that.  If the URL is in the fifth column, then you would do it like this:

var formatter = new google.visualization.PatternFormat('<a href="{1}"><img src="{0}" /></a>');
// replace the '{0}' in the patter with the contents of column 3 (the links) and the '{1}' with the contents of column 4 and put the result in column 0
formatter.format(data, [3, 4], 0);

The way this works is that the formatter takes the values from the columns in the array (the second parameter to the format call) and maps them to the bracketed numbers in the pattern, where the number in the bracket corresponds to the index in the array (not the index of the column!).  In this case, since 3 is at index 0 in the array, the {0} gets replaced with the contents of column 3.

Project Pelican

unread,
Oct 24, 2012, 2:43:24 PM10/24/12
to google-visua...@googlegroups.com
I am having a hard time making that work.  I have put it up here. Do you mind having a look and letting me know what I am doing wrong? http://jsfiddle.net/6cm5c/

Billy

Project Pelican

unread,
Oct 24, 2012, 2:45:56 PM10/24/12
to google-visua...@googlegroups.com
Sorry ASG, I found my mistake.  I had my range set to column D, and so it wasn't seeing the data.

Billy

Hemant Rathod

unread,
Jun 2, 2014, 10:44:22 AM6/2/14
to google-visua...@googlegroups.com
Hi asgallant,
I am using following google org chart code for my obiee report, If you can tell me where I am wrong that will be really helpful ... PLEASE!!!

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
if(document.URL.indexOf("saw.dll?Answers") == -1) {

      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawOrgChart);
}
      function drawOrgChart() {
if(document.URL.indexOf("saw.dll?Answers") == -1) { 
      var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');
        var myOrgArray=[];
        var tempStr = "";

       
       
myOrgArray.push([{v:"@3".replace("  "," "), f:"@3<br/><font color=red><i>@4<i></font>".replace("  "," ")}, "@1".replace("--",""), "@4"]);

  data.addRows(myOrgArray);
        var chart = new google.visualization.OrgChart(document.getElementById('div_orgchart'));
        chart.draw(data, {allowHtml:true});
}
      }
    </script>
    <div id='div_orgchart'></div>

Now i have col 2 which has employee pictures ... whenever i replace @3 with @2 it just crashes and doesnt show anything but when i use @3 in highlighted row it works fine and shows following output


Where it says Jessica Hayes i have employee pics on server but it only shows when i run this report in table format it shows following output

If you can help me that will be really helpful.

Thank you


Andrew Gallant

unread,
Jun 2, 2014, 12:48:53 PM6/2/14
to google-visua...@googlegroups.com
If you have your images on the server, is there a reason why you are dumping a serialized image string as the src of the image instead of using a url to the image file?

Is that <img> element what @3 is adding?  What does @1 add?
Reply all
Reply to author
Forward
0 new messages