CODEWITHSUNDEEP
htmlhyperlinkgoogle-visualization
user974435
user974435

Reputation: 397

Google Visualization: Organizational Chart Add Html URL

I would like to add HTML URL to Google Visualization: Organizational Chart, I cannot locate that option in Google APIs, please help. Sample code below

<html>
  <head>
    <script type='text/javascript' src='https://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.addColumn('string', 'ToolTip');
        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
    </script>
  </head>

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

Upvotes: 1

Views: 2033

Answers (1)

asgallant
asgallant

Reputation: 26340

Just add the link to the formatted value of the cell:

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

    data.addRows([
        [{v: 'parent_node', f: 'Parent Node'}, null],
        [{v: 'child_node_1', f: '<a href="path/to/target">Child Node 1</a>'}, 'parent_node'],
        [{v: 'child_node_2', f: 'Child Node 2'}, 'parent_node']
    ]);

    var chart = new google.visualization.OrgChart(document.querySelector('#chart_div'));
    chart.draw(data, {allowHtml: true});
}

See http://jsfiddle.net/asgallant/LPHtr/1/

Upvotes: 2

Related Questions