How to add html in rows of google chart API - charts

Question

I have a chart with values like below one column have multiple values with forward slash.
but i want to change it like this image.
Here is my chart code
while(start<=end)
{
orgcode=org_hi.substring(start,org_hi.indexOf('-',start));
/* code add by sim*/
/* var res = orgcode.split("/");
if(res.length!=0)
{
var i = 0;
res.forEach(function(entry) {
var sim = "[{v:'"+entry+"', f:'"+entry+"<div style='color:red; font-style:italic'>President</div>'},'', 'The President']";
extndOrg.push(sim);
i++;
});
}*/
/* end code*/
/* if(res.length!=0)
{
var arr1d=new Array(extndOrg,orghead);
}
else
{
var arr1d=new Array(orgcode,orghead);
}*/
var arr1d=new Array(orgcode,orghead);
arr2d.push(arr1d);
start=start+orgcode.length+1;
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Node');
data.addColumn('string', 'Parent');
data.addRows(arr2d);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// chart.draw(data);
chart.draw(data, {allowHtml:true});
and orgcode have a dynamic value which is splited with '-'
here is that dynamic value
XPHNG/XPHNG-DDPOA/XPHNG/DDPOA-RUDCP/XPHNG/DDPOA/RUDCP-DCCBA-XENMD-EEPD2/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2-DICAM-ZSBAM/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM-ARCS8/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8-GMHRA-WAKFA-DTPMB/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8/GMHRA/WAKFA/DTPMB

Answer 1

in order to use html on the nodes...
1) need to set the following option...
allowHtml: true
e.g.
chart.draw(data, {
allowHtml: true
});
2) need to use object notation for the cell values
where v: is the value, and f: is the formatted value, e.g.
{v: 'Mike', f: '<div>Email Mike</div>'}
the chart will use the value as the id for building the relationships
but display the formatted value on the node
if you don't want to provide object notation,
you can also use the setFormattedValue method on the data table
data.setFormattedValue(1, 0, namesHtml);
3) see following working snippet...
object notation is used to provide link for 'Mike'
'Jim' is later updated with the split string using the method setFormattedValue
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.addRows([
[{v: 'Mike', f: '<div>Email Mike</div>'}, ''],
['Jim', 'Mike'],
['Alice', 'Mike'],
['Bob', ''],
['Carol', 'Bob']
]);
var splitStr = 'XPHNG/XPHNG-DDPOA/XPHNG/DDPOA-RUDCP/XPHNG/DDPOA/RUDCP-DCCBA-XENMD-EEPD2/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2-DICAM-ZSBAM/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM-ARCS8/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8-GMHRA-WAKFA-DTPMB/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8/GMHRA/WAKFA/DTPMB';
var names = splitStr.split('-');
var namesHtml = '';
names.forEach(function (name) {
namesHtml += '<div>' + name + '</div>'
});
// change Jim
data.setFormattedValue(1, 0, namesHtml);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {
allowHtml: true
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>