PHP和Highcharts

Question

I'm using the code below to generate a pie chart. But I'm getting a blank page instead of a chart.

I couldn't find any error in the console, however.

How can I find if anything is missing? How can I debug my code in this case?

<?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $conn = new mysqli($servername, $username, $password);
        // Check connection
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        } 
        $query = "SELECT name, val FROM wfss.web_marketing";
        $result = mysqli_query($conn , $query);
        if ($result) {
        echo "</br>"."Results Found";
        // Conversion of result object into JSON format
        $rows = array();
        while($r = mysqli_fetch_array($result,MYSQLI_NUM)) {
            $row[0] = $r[0];
            $row[1] = $r[1];
            array_push($rows,$row);
        }
        print json_encode($rows, JSON_NUMERIC_CHECK);

        } else {
            echo "No Results Found";
        }

        mysqli_close($conn);
?>  


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Web Sales & Marketing Efforts'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser share',
                data: [<?php echo json_encode($rows)?> ]
            }]
        }
    });   

</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Answer 1

You need to create highcharts with your "options " var for example

if using highcharts :

$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});

if using highstock

 var chart = new Highcharts.StockChart(options);

see This link for more details