user10415043
Reputation:
Show tree structure hierarchy via JSON Schema
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
Upvotes: 0
Views: 552
Answers (1)
Vahe
Reputation: 1841
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});
}
Upvotes: 1
Related Questions
- JSON Schema for tree structure
- How to get hierarchical tree structure from JSON API endpoint data in PHP?
- Making a Tree like Structure in Json With Recursion
- Represent hierarchy in a JSON object
- How to create a tree structure representation in JSON?
- Building hierarchy tree using JSON
- Create a tree from JSON
- How to create JSON Schema for Tree structure?
- Hierarchical JSON with tree structure
- Convert nested list into tree picture