Show tree structure hierarchy via JSON Schema - json

Question

I'm trying to achieve orgchart tree structure via JSON Schema. I'm trying to map Id with BossId and Id is unique and whoever has BossId of Id is the sub-employee of that BossId. I've tried a jQuery plugin and Google Org Chart. But both of those have different schema as to mine. My JSON Schema is
[
{
"BossId": "3",
"DateOfBirth": "1966-09-27T00:00:00",
"FamilyName": "Montejano",
"Gender": "Unspecified",
"GivenName": "Trinh",
"Id": "08",
"Title": "Tech Manager"
},
{
"BossId": "0",
"DateOfBirth": "1927-01-29T00:00:00",
"FamilyName": "Fetzer",
"Gender": "Unspecified",
"GivenName": "Winfred",
"Id": "00",
"Title": "CEO"
},
{
"BossId": "1",
"DateOfBirth": "1927-08-20T00:00:00",
"FamilyName": "Dandrea",
"Gender": "Male",
"GivenName": "Erich",
"Id": "02",
"Title": "VP of Marketing"
},
{
"BossId": "1",
"DateOfBirth": "1929-02-07T00:00:00",
"FamilyName": "Nisbet",
"Gender": "Male",
"GivenName": "Reinaldo",
"Id": "03",
"Title": "VP of Technology"
},
{
"BossId": "1",
"DateOfBirth": "1932-06-13T00:00:00",
"FamilyName": "Bufford",
"Gender": "Unspecified",
"GivenName": "Alleen",
"Id": "04",
"Title": "VP of HR"
},
{
"BossId": "2",
"DateOfBirth": "1936-09-26T00:00:00",
"FamilyName": "Klopfer",
"Gender": "Female",
"GivenName": "Kristyn",
"Id": "05",
"Title": "Director of Marketing"
},
{
"BossId": "1",
"DateOfBirth": "1937-11-23T00:00:00",
"FamilyName": "Duhon",
"Gender": "Male",
"GivenName": "Sophie",
"Id": "01",
"Title": "Tech Manager"
},
{
"BossId": "3",
"DateOfBirth": "1948-04-05T00:00:00",
"FamilyName": "Mirabal",
"Gender": "Female",
"GivenName": "Suanne",
"Id": "07",
"Title": "Tech Manager"
},
{
"BossId": "4",
"DateOfBirth": "1966-10-13T00:00:00",
"FamilyName": "Maslowski",
"Gender": "Unspecified",
"GivenName": "Norah",
"Id": "09",
"Title": "Tech Manager"
},
{
"BossId": "6",
"DateOfBirth": "1967-08-25T00:00:00",
"FamilyName": "Redford",
"Gender": "Female",
"GivenName": "Gertrudis",
"Id": "10",
"Title": "Tech Lead"
},
{
"BossId": "6",
"DateOfBirth": "1968-12-26T00:00:00",
"FamilyName": "Tobey",
"Gender": "Male",
"GivenName": "Donovan",
"Id": "11",
"Title": "Tech Lead"
},
{
"BossId": "9",
"DateOfBirth": "1969-10-16T00:00:00",
"FamilyName": "Vermeulen",
"Gender": "Male",
"GivenName": "Rich",
"Id": "12",
"Title": "Trainer Lead"
},
{
"BossId": "9",
"DateOfBirth": "1972-10-16T00:00:00",
"FamilyName": "Knupp",
"Gender": "Male",
"GivenName": "Santo",
"Id": "13",
"Title": "HR Manager"
},
{
"BossId": "12",
"DateOfBirth": "1974-03-23T00:00:00",
"FamilyName": "Grooms",
"Gender": "Female",
"GivenName": "Jazmin",
"Id": "14",
"Title": "Trainer"
},
{
"BossId": "13",
"DateOfBirth": "1978-08-25T00:00:00",
"FamilyName": "Cheeks",
"Gender": "Female",
"GivenName": "Annelle",
"Id": "15",
"Title": "Recruiter"
},
{
"BossId": "15",
"DateOfBirth": "1979-08-21T00:00:00",
"FamilyName": "Harshaw",
"Gender": "Unspecified",
"GivenName": "Eliza",
"Id": "16",
"Title": "Trainer"
},
{
"BossId": "8",
"DateOfBirth": "1980-02-09T00:00:00",
"FamilyName": "Broaddus",
"Gender": "Unspecified",
"GivenName": "Xiomara",
"Id": "17",
"Title": "Senior Software Developer"
},
{
"BossId": "11",
"DateOfBirth": "1981-09-08T00:00:00",
"FamilyName": "Jungers",
"Gender": "Unspecified",
"GivenName": "Erminia",
"Id": "18",
"Title": "Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1984-03-18T00:00:00",
"FamilyName": "Moffatt",
"Gender": "Female",
"GivenName": "Maria",
"Id": "19",
"Title": "Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1990-09-24T00:00:00",
"FamilyName": "Grimaldo",
"Gender": "Female",
"GivenName": "Tammera",
"Id": "20",
"Title": "Senior Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1992-06-18T00:00:00",
"FamilyName": "Das",
"Gender": "Female",
"GivenName": "Sharyl",
"Id": "21",
"Title": "Software Developer"
},
{
"BossId": "8",
"DateOfBirth": "1993-11-15T00:00:00",
"FamilyName": "Harlan",
"Gender": "Unspecified",
"GivenName": "Shan",
"Id": "22",
"Title": "UI Developer"
},
{
"BossId": "11",
"DateOfBirth": "1997-03-23T00:00:00",
"FamilyName": "Almeida",
"Gender": "Female",
"GivenName": "Mariah",
"Id": "23",
"Title": "QA Tester"
},
{
"BossId": "11",
"DateOfBirth": "1998-11-10T00:00:00",
"FamilyName": "Kerfien",
"Gender": "Male",
"GivenName": "Darnell",
"Id": "24",
"Title": "QA Tester"
},
{
"BossId": "11",
"DateOfBirth": "2004-04-22T00:00:00",
"FamilyName": "Vierra",
"Gender": "Female",
"GivenName": "Janell",
"Id": "25",
"Title": "QA Tester"
}
]
BossId : 0 is the CEO and beneath him every other employee is

Answer 1

Please see fiddle and code below, JSON unmodified and it currently contains disconnection as seen in fiddle.
Fiddle
https://jsfiddle.net/shL7tjpa/2/
Code
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
var members = [
{
"BossId": "3",
"DateOfBirth": "1966-09-27T00:00:00",
"FamilyName": "Montejano",
"Gender": "Unspecified",
"GivenName": "Trinh",
"Id": "08",
"Title": "Tech Manager"
},
{
"BossId": "0",
"DateOfBirth": "1927-01-29T00:00:00",
"FamilyName": "Fetzer",
"Gender": "Unspecified",
"GivenName": "Winfred",
"Id": "00",
"Title": "CEO"
},
{
"BossId": "1",
"DateOfBirth": "1927-08-20T00:00:00",
"FamilyName": "Dandrea",
"Gender": "Male",
"GivenName": "Erich",
"Id": "02",
"Title": "VP of Marketing"
},
{
"BossId": "1",
"DateOfBirth": "1929-02-07T00:00:00",
"FamilyName": "Nisbet",
"Gender": "Male",
"GivenName": "Reinaldo",
"Id": "03",
"Title": "VP of Technology"
},
{
"BossId": "1",
"DateOfBirth": "1932-06-13T00:00:00",
"FamilyName": "Bufford",
"Gender": "Unspecified",
"GivenName": "Alleen",
"Id": "04",
"Title": "VP of HR"
},
{
"BossId": "2",
"DateOfBirth": "1936-09-26T00:00:00",
"FamilyName": "Klopfer",
"Gender": "Female",
"GivenName": "Kristyn",
"Id": "05",
"Title": "Director of Marketing"
},
{
"BossId": "1",
"DateOfBirth": "1937-11-23T00:00:00",
"FamilyName": "Duhon",
"Gender": "Male",
"GivenName": "Sophie",
"Id": "01",
"Title": "Tech Manager"
},
{
"BossId": "3",
"DateOfBirth": "1948-04-05T00:00:00",
"FamilyName": "Mirabal",
"Gender": "Female",
"GivenName": "Suanne",
"Id": "07",
"Title": "Tech Manager"
},
{
"BossId": "4",
"DateOfBirth": "1966-10-13T00:00:00",
"FamilyName": "Maslowski",
"Gender": "Unspecified",
"GivenName": "Norah",
"Id": "09",
"Title": "Tech Manager"
},
{
"BossId": "6",
"DateOfBirth": "1967-08-25T00:00:00",
"FamilyName": "Redford",
"Gender": "Female",
"GivenName": "Gertrudis",
"Id": "10",
"Title": "Tech Lead"
},
{
"BossId": "6",
"DateOfBirth": "1968-12-26T00:00:00",
"FamilyName": "Tobey",
"Gender": "Male",
"GivenName": "Donovan",
"Id": "11",
"Title": "Tech Lead"
},
{
"BossId": "9",
"DateOfBirth": "1969-10-16T00:00:00",
"FamilyName": "Vermeulen",
"Gender": "Male",
"GivenName": "Rich",
"Id": "12",
"Title": "Trainer Lead"
},
{
"BossId": "9",
"DateOfBirth": "1972-10-16T00:00:00",
"FamilyName": "Knupp",
"Gender": "Male",
"GivenName": "Santo",
"Id": "13",
"Title": "HR Manager"
},
{
"BossId": "12",
"DateOfBirth": "1974-03-23T00:00:00",
"FamilyName": "Grooms",
"Gender": "Female",
"GivenName": "Jazmin",
"Id": "14",
"Title": "Trainer"
},
{
"BossId": "13",
"DateOfBirth": "1978-08-25T00:00:00",
"FamilyName": "Cheeks",
"Gender": "Female",
"GivenName": "Annelle",
"Id": "15",
"Title": "Recruiter"
},
{
"BossId": "15",
"DateOfBirth": "1979-08-21T00:00:00",
"FamilyName": "Harshaw",
"Gender": "Unspecified",
"GivenName": "Eliza",
"Id": "16",
"Title": "Trainer"
},
{
"BossId": "8",
"DateOfBirth": "1980-02-09T00:00:00",
"FamilyName": "Broaddus",
"Gender": "Unspecified",
"GivenName": "Xiomara",
"Id": "17",
"Title": "Senior Software Developer"
},
{
"BossId": "11",
"DateOfBirth": "1981-09-08T00:00:00",
"FamilyName": "Jungers",
"Gender": "Unspecified",
"GivenName": "Erminia",
"Id": "18",
"Title": "Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1984-03-18T00:00:00",
"FamilyName": "Moffatt",
"Gender": "Female",
"GivenName": "Maria",
"Id": "19",
"Title": "Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1990-09-24T00:00:00",
"FamilyName": "Grimaldo",
"Gender": "Female",
"GivenName": "Tammera",
"Id": "20",
"Title": "Senior Software Developer"
},
{
"BossId": "10",
"DateOfBirth": "1992-06-18T00:00:00",
"FamilyName": "Das",
"Gender": "Female",
"GivenName": "Sharyl",
"Id": "21",
"Title": "Software Developer"
},
{
"BossId": "8",
"DateOfBirth": "1993-11-15T00:00:00",
"FamilyName": "Harlan",
"Gender": "Unspecified",
"GivenName": "Shan",
"Id": "22",
"Title": "UI Developer"
},
{
"BossId": "11",
"DateOfBirth": "1997-03-23T00:00:00",
"FamilyName": "Almeida",
"Gender": "Female",
"GivenName": "Mariah",
"Id": "23",
"Title": "QA Tester"
},
{
"BossId": "11",
"DateOfBirth": "1998-11-10T00:00:00",
"FamilyName": "Kerfien",
"Gender": "Male",
"GivenName": "Darnell",
"Id": "24",
"Title": "QA Tester"
},
{
"BossId": "11",
"DateOfBirth": "2004-04-22T00:00:00",
"FamilyName": "Vierra",
"Gender": "Female",
"GivenName": "Janell",
"Id": "25",
"Title": "QA Tester"
}
];
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
$.each(members,function(idx, member){
// For each orgchart box, provide the name, manager, and tooltip to show.
member = JSON.parse(JSON.stringify(member));
data.addRow(
[{v: ""+parseInt(member.Id), f:member.GivenName+ ' ' + member.FamilyName+'<div style="color:red; font-style:italic">'+member.Title+'</div>'}, ""+parseInt(member.BossId), '']);
});
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, {allowHtml:true});
}