Unexpected end of json input error in php

PHP
1

i am trying to use php in d3…i am getting unexpected end of input at json parse error when i use php file in d3 …if i run the php and get the output in .json file and used that json file in d3,thats works fine…but i want to use the php file in d3…after many google search,i didn’t get any idea…

<?php

if(isset($_GET['input']))
{
$con=mysqli_connect("localhost","root","admin321","php");       

if (mysqli_connect_errno())                
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
   $name=$_GET['input'];
 $sql="SELECT * FROM tab where value LIKE '%".$name."%'";
$r = mysqli_query($con,$sql);
        $data = array();
        while($row = mysqli_fetch_assoc($r)) {
         $data[] = $row;
         }  
         function buildtree($src_arr, $parent_id = 0, $tree = array())
{
    foreach($src_arr as $idx => $row)
    {
        if($row['parent'] == $parent_id)
        {
            foreach($row as $k => $v)
                $tree[$row['id']][$k] = $v;
            unset($src_arr[$idx]);
            $tree[$row['id']]['children'] = buildtree($src_arr, $row['id']);
        }
    }
    ksort($tree);
    return $tree;
}

function insertIntoNestedArray(&$array, $searchItem){

    if($searchItem['parent'] == 0){
        array_push($array, $searchItem);
        return;
    }
    if(empty($array)){ return; }
 array_walk($array, function(&$item, $key, $searchItem){
    if($item['id'] == $searchItem['parent']){
            array_push($item['children'], $searchItem);
            return;
        }
        insertIntoNestedArray($item['children'], $searchItem);
}, $searchItem);
}
$nestedArray = array();
foreach($data as $itemData){

    $nestedArrayItem['id'] = $itemData['id'];
    $nestedArrayItem['name'] = $itemData['name'];
 $nestedArrayItem['parent'] = $itemData['parent'];
    $nestedArrayItem['children'] = array();

    insertIntoNestedArray($nestedArray, $nestedArrayItem);
}
   header('Content-Type: application/json');
 $json= json_encode($nestedArray);
echo $json ;

}
?>

this is my json output

[
      {
  "id":"4",
  "name":"B",
  "parent":"0",
  "children":[
     {
        "id":"5",
        "name":"B1",
        "parent":"4",
        "children":[

        ]
     }
  ]
  }
   ]

this is my d3

<!DOCTYPE html>
     <html>
    <head>
       <title>Radial Cluster Demo</title>
    <script src="//d3js.org/d3.v3.min.js"></script> 
     <style>
    .node {
        cursor: pointer;
    }
    .overlay {
        background-color:white;
    }
    .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
    }
    .node text {
         font: sans-serif;
        font-size: 80%;
        text-align: center;
    }
    .link {
        fill: none;   
    } 
    .parent{
    fill :red;
    }
    div#tooltip {   
        position: absolute;         
          font: 15px sans-serif;        
        background: orange; 
         border-radius: 8px;    
            padding-left: 5px;
            padding-right: 5px;
        pointer-events: none;           
    }

     </style>
        </head>

      <body>
     <div id="tooltip" style="display:none"></div>
    <div id="tree-container"class="full"></div>
    <script type="text/javascript">


    var selectedNode = null;
    var draggingNode = null;

    var panSpeed = 200;
    var panBoundary = 0; 

    var i = 0;
    var duration = 750;
    var root;

    var width = 5000;
    var height = 5000;

    var diameter = 750;

    var tree = d3.layout.tree().size([360, diameter / 2 - 120])

        .separation(function (a, b) {
        return (a.parent == b.parent ? 1 : 5) / a.depth;
    });
    var diagonal = d3.svg.diagonal.radial()

        .projection(function (d) {
        return [d.y, d.x / 180 * Math.PI];
    });


    d3.select(self.frameElement).style("height", width);



    function sortTree() {
        tree.sort(function (a, b) {
        return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
        });
    }
    sortTree();
    var baseSvg = d3.select("#tree-container").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "overlay")

     .attr("transform", "translate(" + 1000 + "," + 1000 + ")");


    function expand(d) {

        if (d._children) {
            d.children = d._children;
            d.children.forEach(expand);
            d._children = null;
        }
    }
    d3.json("index.php", function(error,flare) {
      if (error) throw error;

      root = flare;
      root.x0 = height / 2;
      root.y0 = 0;



    function collapse(d) {

        if (d.children) {
            d._children = d.children;
            d._children.forEach(collapse);
            d.children = null;
        }

    update(d);
    }
     flare.children.forEach(collapse);
      update(root);

    function toggleChildren(d) {

        if (d.children) {
            d._children = d.children;
            d.children = null;
        } else if (d._children) {
            d.children = d._children;
            d._children = null;
        }
        return d;
    }


    function click(d) {

    if (!d.children) 
         root.children.forEach(collapse);
    //d.children = d._children;
    //    d._children = null;
        if (d3.event.defaultPrevented) return; 

        d = toggleChildren(d);

        update(d);


    }

    function update(source) {

        var levelWidth = [1];
        var childCount = function (level, n) {
            if (n.children && n.children.length > 0) {
    if (levelWidth.length <= level + 1) levelWidth.push(0);

                levelWidth[level + 1] += n.children.length;
                n.children.forEach(function (d) {
                    childCount(level + 1, d);
                });
            }
        };
        childCount(0, root);
         var nodes = tree.nodes(root); 
        links = tree.links(nodes);
        node = svgGroup.selectAll("g.node")
            .data(nodes, function (d) {
            return d.id || (d.id = ++i);
        });




        var nodeEnter = node.enter().append("g")
         .attr("class", "node")
        .on('click', click);

          nodeEnter.append("circle")
            .attr("class", "smallcircle")
                .style("stroke", function(d) { return d.color;});


        nodeEnter.append("text")
      .text(function (d) { return d.name;  })
         //   .style("font", "12px serif")
            .style("opacity", 1)
            .style("fill-opacity", 0)
            .on("mouseover", function (d) {
    var r = d3.select(this).node().getBoundingClientRect();
               d3.select("div#tooltip")
                    .style("display", "inline")
                   .style("top", (r.top-25) + "px")
                   .style("top", 10 + "px")
                .style("left", (d3.event.pageX) + "px")     
                    .style("top", (d3.event.pageY - 40) + "px") 
                  .style("left", r.left + 40+"px")
                  .style("left",  + "px")
                    .style("position", "absolute")
                   .text(d.t);
             })
        .on("mouseout", function(){
           d3.select("div#tooltip").style("display", "none")
       });


        node.select("circle.nodeCircle")
            .attr("r", 4.5)
   .style("fill", function (d) { return d._children ? "red" : "#fff"; });


                                //     });
         var nodeUpdate = node.transition()
            .duration(duration)
    .attr("transform", function (d) { return
   "rotate(" + (d.x - 90) + ")translate
   (" + d.y + ")rotate(" + (-d.x + 90) + ")"; });
      nodeUpdate.select("circle").attr("r", 4.5)

   .style("fill", function (d) {return d._children ? 
 "lightsteelblue" : "#fff";});

        nodeUpdate.select("text")
            .style("fill-opacity", 4)
       .attr("fill",function(d){return (d.children?"red":"black");})
        .attr("stroke-width",function(d)
    {return (d.children?"4":"1");})
         .attr("stroke-width",function(d)
       {return (d.children?"4 px":"1 px");})

        .attr("dy", ".35em")
            .attr("text-anchor", function (d) {
            return d.x < 180 ? "start" : "end";
        })


            .attr("transform", function (d) {
    return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
        });

        var nodeExit = node.exit().transition()
            .duration(duration)
            .attr("transform", function (d) {
            return "translate(" + source.x + "," + source.y + ")"; })
            .remove();

        nodeExit.select("circle")
            .attr("r", 0);

        nodeExit.select("text")
            .style("fill-opacity", 0);


        var link = svgGroup.selectAll("path.link")
            .data(links, function (d) {
            return d.target.id;
        })
    link.style("stroke", function(d) {
          return d.color;
        })

        link.enter().insert("path", "g")
            .attr("class", "link")
             link.style("stroke", function(d) {
          return d.target.color;
        })
            .attr("d", function (d) {
            var o = {
                x: source.x0,
                y: source.y0
            };
            return diagonal({
                source: o,
                target: o
            });
        });


        link.transition()
            .duration(duration)
            .attr("d", diagonal);


        link.exit().transition()
            .duration(duration)
            .attr("d", function (d) {
            var o = {
                x: source.x,
                y: source.y
            };
            return diagonal({
                source: o,
                target: o
            });
        })
            .remove();


        nodes.forEach(function (d) {
            d.x0 = d.x;
            d.y0 = d.y;
        });
    }
    });
    var svgGroup = baseSvg.append("g")
  .attr("transform", "translate(" + 550 + "," + 300 + ")");


    d3.selectAll("text").style("fill", function (d) 
   { return d3.select(this).classed(d.cond, true); });
     </script>
    </body>

    </html>

already asked in many sites like here
if anyone give some idea…that would be helpfull…

2

You might want to look at http://php.net/manual/en/function.json-encode.php for building the json.

btw you’ve got a bigger problem as you’re sticking a user submitted value straight into a query, you should use a prepared statement, atm you’re wide open to potential SQL Injection attacks. It’s made worse by your use of the root “mysql user” which would potentially place with your current code every database on the server at risk. The “mysql user” used should only have access to the application’s database and its permissions locked down to just what it needs to function

3

thanks for your reponse…i will look into the problem based on your suggestion…i have a doubt? i thing the way i used the json_encode is right…(plz correct me,if not…) because if the way i used is wrong how it produce the valid json which work perfectly in d3 ,when i write php output into the json file and used that json file in d3…

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.