1

I'm working with Google Charts to create an Organization Chart for the company I work for. We want to make it mildly interactive and I would like to be able to have a tooltip appear once the user selects a person. This tooltip would have a link to send an email directly to the person that is selected.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{v:'Mary', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'},
       ''],
      [{v:'Lois', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'},
       'Mary'],
      [{v:'Steven', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois'],
      [{v:'Pamela', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven'],
      [{v:'Linda', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven'],
      [{v:'Natalie', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven'],
      [{v:'Doris', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven'],
                [{v:'Phyllis', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela'],
      [{v:'Connie', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela'],
      [{v:'Betty', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie'],
      [{v:'Williene', f:'FirstName LastName<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie'],
    ]);

    //Set Chart options
    var options = {'allowHtml': true,
                                'size':'medium',
                  'nodeClass':'orgNode',
                  'selectedNodeClass':'orgNodeSelect',
                  tooltip: {trigger: 'selection'}};


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

    // Set Action
    /*chart.setAction({
            id: 'emailSelect',
        text: 'Send email'
    });*/

    // Draw the chart, setting the options
    chart.draw(data, options);
  }

Here is a jsfiddle of the code with what I have right now. I'm not entirely sure where to go from here in order to create the tooltip and create the email link.

As of now, assume we're not using database as the chart will be small.

Also, side note. Is there a way to create a dotted line from the Accounting Supv. to the Staff Accountant? Keeping the line intact from the Sr. Accounting Supervisor to the Staff Accountant, that is.

Thanks for your help!

ebbBliss
  • 173
  • 1
  • 13

1 Answers1

1

problem with using the standard tooltip mentioned in the data format for an OrgChart,

it doesn't support html or other options as provided by other charts... 

    tooltip: {
      isHtml: true,
      trigger: 'selection'
    }

as such, the tooltip will not be able to display a link,
or reliably stay visible long enough to click it

check following working snippet, see Mary or Lois... 

google.charts.load('current', {
 callback: drawChart,
 packages: ['orgchart']
});

function drawChart() {
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Name');
 data.addColumn('string', 'Manager');
 data.addColumn('string', 'Tooltip');

 // For each orgchart box, provide the name, manager, and tooltip to show.
 data.addRows([
  [{v:'Mary', f:'Mary<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'},
   '', '<a href="mailto:mary@some_email.com">Mary</a>'],
  [{v:'Lois', f:'Lois<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'},
   'Mary', '<a href="mailto:lois@some_email.com">Lois</a>'],
  [{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null],
  [{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null],
  [{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null],
  [{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null],
  [{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null],
  [{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null],
  [{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null],
  [{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null],
  [{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null],
 ]);

 //Set Chart options
 var options = {'allowHtml': true,
  size: 'medium',
  nodeClass: 'orgNode',
  selectedNodeClass: 'orgNodeSelect',
  tooltip: {
   isHtml: true,
   trigger: 'selection'
   }
 };

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

 // Draw the chart, setting the options
 chart.draw(data, options);
}
.orgNode {
  background-color: #fff;
  border: 1px solid #285580;
  border-radius: 3px;
}

.orgNodeSelect {
  background-color: #E5F1FC;
  border: 1px solid #285580;
  border-radius: 3px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

instead, recommend adding the link directly to the name displayed on the node

see following working snippet... 

google.charts.load('current', {
 callback: drawChart,
 packages: ['orgchart']
});

function drawChart() {
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Name');
 data.addColumn('string', 'Manager');
 data.addColumn('string', 'Tooltip');

 // For each orgchart box, provide the name, manager, and tooltip to show.
 data.addRows([
  [{v:'Mary', f:'<a href="mailto:mary@some_email.com">Mary</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. V.P. & C.F.O.</div>'},
   '', 'The President'],
  [{v:'Lois', f:'<a href="mailto:lois@some_email.com">Lois</a><div style="color:#7dbcf1; font-style:italic; font-size:11px;">Admin/Tech Asst.</div>'},
   'Mary', null],
  [{v:'Steven', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">V.P., Controller & Asst. Treasurer'}, 'Lois', null],
  [{v:'Pamela', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Gen. Accounting Supv.'}, 'Steven', null],
  [{v:'Linda', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Financial Assistant'}, 'Steven', null],
  [{v:'Natalie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Sr. Accounting Supv.'}, 'Steven', null],
  [{v:'Doris', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Supv.'}, 'Steven', null],
  [{v:'Phyllis', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accounting Assistant'}, 'Pamela', null],
  [{v:'Connie', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Receivable Clerk'}, 'Pamela', null],
  [{v:'Betty', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Staff Accountant'}, 'Natalie', null],
  [{v:'Williene', f:'Name Name<div style="color:#7dbcf1; font-style:italic; font-size:11px;">Accts. Payable Clerk'}, 'Natalie', null],
 ]);

 //Set Chart options
 var options = {'allowHtml': true,
  size: 'medium',
  nodeClass: 'orgNode',
  selectedNodeClass: 'orgNodeSelect',
  tooltip: {
   isHtml: true,
   trigger: 'selection'
   }
 };

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

 // Draw the chart, setting the options
 chart.draw(data, options);
}
.orgNode {
  background-color: #fff;
  border: 1px solid #285580;
  border-radius: 3px;
}

.orgNodeSelect {
  background-color: #E5F1FC;
  border: 1px solid #285580;
  border-radius: 3px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • hope this helps, if you don't want node selection on link click -- see snippet in [this answer](http://stackoverflow.com/a/38807797/5090771) -- i noticed an attempt to use _actions_ was commented out, assuming this didn't work either? i can check if unsure... – WhiteHat Apr 06 '17 at 00:21
  • I was trying to use the actions similar to this [tooltip action](https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltip-actions) that the Google guides show. But I wasn't quite getting it right. – ebbBliss Apr 07 '17 at 14:09
  • unfortunately, OrgChart does not have a [method](https://developers.google.com/chart/interactive/docs/gallery/orgchart#methods) for `setAction`... – WhiteHat Apr 10 '17 at 22:26