Display a list as binary tree

Question

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 whihc every record knows whose it's parent is and on which side they are on. that data is encoded into json and sent back to 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 wich user is it's 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

Possible duplicate of [Draw a binary tree](http://stackoverflow.com/questions/21231245/draw-a-binary-tree) — DavidVollmers, Jan 15 '16 at 06:29
Can you post your data? How do you want them to be displayed? What have you done so far? — Aᴍɪʀ, Jan 15 '16 at 06:29
imho, it's very good question. But I think there is no universal binary tree visualiser since the number of their leaves grows very quickly. So the implementation strongly depends on how deep a tree is. E.g. http://thecodeplayer.com/walkthrough/create-binary-trees-using-javascript-and-html5-canvas - as you can see there is no place for any data associated with leaves. :) — Rango, Jan 15 '16 at 06:54
@f_martinezn looks like I found such an implementation. It's Google Organizational chart. They are easy to implement. the one drawback they have is if the node has only one child then it will not be shown on left or right — Gardezi, Jan 18 '16 at 05:55

Gardezi · Accepted Answer · 2016-01-15T13:27:04.593

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

Display a list as binary tree

1 Answers1