I want to draw a binary tree but the thing is I cannot find any correct JavaScript plugin. I have googled a lot for a JavaScript plugin but couldn't find any which would help me and the ones I found did not have a lot of documentation.
I retrieve the binary tree in which every record knows whose its parent is and on which side they are on. That data is encoded into JSON and sent back to an AJAX call. I want to draw the binary on this data. Can anybody tell me of any plugin that will help me do this
id |user_id| parent_id |side |depth |created_at | updated_at
My data comes back in a JSON form. Now in this I have the sides on which they are on and the parent id tells that which user is its parent. Now data comes back in a JSON form which has a array each index having an object in the format which I have given in block quotes. Now I want a a jQuery library that takes in the user id as to what to display in as text in them and if they have a parent whose its parent is and on which side they are on
I found a solution to make such a binary tree. Anybody reading this answer can use Google Organization Chart and here's the link Google Organization Chart
$(document).ready(function(){
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'id');
data.addColumn('string', 'Manager');
data.addColumn('string', 'toolTip');
data.addRows([
<?php foreach($data as $values): ?>
[value, parent, ""],
<?php endforeach; ?>
]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
});
One last thing when you will try to print since I'm using php I encountered a error that the root parent had no child so it was not printing anything so for all php developers you can do this in the parent parameter
"<?php echo isset($values['something']) ? $values['something'] : ''; ?>"
and one last thing in my case everything was string so I had to enclose the values etc in inverted commas
Hope this solution helps
One thing I forgot is just remember if a node has only one child then it will not display it on left or right but in a straight line. This is the only thing that it lacks that is to my knowledge