can't make orgchart in php

I am trying to make orgchart in my code, a have not any idea about this chart. I want to make a a tree like chart, and want data from mysql table. Table is : treechart
id name treeid
1 a 1
2 aa 11
3 aaa 111
4 aaaa 1111
5 ab 12
6 aba 121
7 abb 122
8 ac 13

My code is as below :

 <html>
 <head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    // For each orgchart box, provide the name, manager, and tooltip to show.

    <?php 
        include get_template_directory()."/connect/connect.php"; 


        $result = mysql_query("select * from treechart order by id asc");
        $members = array();
        $demo = "[\n";
        while ($row = mysql_fetch_array($result))   
        {
            $members[$row[2]] = $row[1];
        }
        function search_tree($searchkey)
        {
            return $members[$searchkey];
        }
        foreach($members as $key=>$member)
        {
            if(strlen($key)==1)
            {
                $demo = $demo."['".$member."','','".$member."'],\n";
                $one = $member;
            }
            if(strlen($key)==2)
            {
                $demo = $demo."['".$member."','".$one."',''],\n";
            }
            if(substr($key,0,2)=="11")
            {
                if(strlen($key)==3)
                {
                    $newkey = search_tree("11");
                    echo $newkey."---.";
                }

            }
            $oldkey = strlen($key);
        }
        $demo = substr($demo,0,strlen($demo)-2);
        $demo = $demo."]";
        print_r($newdemo);

    ?>
    data.addRows(<?php echo $demo; ?>);

    // 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});
  }
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

My problem is in $newkey I can't any value, I want the value of 11,12,13 keys value in $newkey. And I have very big amount of data in table, so if anyone have any short coding idea, then help me in my code.

Solution

You have to define parent column in your table

id | parrentId | Name

Here is an example

   var orgchart = new getOrgChart(document.getElementById("people"),{
        dataSource: [
	        { id: 1, parentId: null, Name: "1"},
	        { id: 2, parentId: 1, Name: "2"},
	        { id: 3, parentId: 1, Name: "3"}]
    });

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  overflow: hidden;
}

#people {
  width: 100%;
  height: 100%;
}

<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet"/>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>

<div id="people"></div>