I created a Google Organization Chart on SharePoint using the answer from the following question on Stack Overflow.
https://stackoverflow.com/questions/33796219/organization-chart-from-sharepoint-list-items
Items for the Organization Chart are retrieved from a Custom SharePoint List using REST and Javascript.
My question is, how should I modify the code below to show job titles below each name in the Organization Chart?
(Job titles are stored in the custom SharePoint list)
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<script language="javascript">
google.load("visualization", "1", { packages: ("orgchart") });
google.setOnLoadCallback(displayChart);
function displayChart()
{
loadListItems('Organization_Chart')
.done(function(data){
var items = data.d.results;
drawChart(items);
})
.fail(function(error){
console.log(error);
});
}
function drawChart(items) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
for (var i = 0; i < items.length; i++) {
data.addRow((items(i)('Title'),items(i)('Manager')('Title'),''));
}
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, { allowHtml: true });
}
function loadListItems(listTitle){
return $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + listTitle + "')/items?$select=*,Title,Manager/Title&$expand=Manager",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
</script>
<div id="chart_div"></div>
Custom SharePoint List stores each employee’s name, manager, and job title.
SharePoint List has the following schema:
Field Name Type
Title Text
Manager Lookup
Job_Title Text