HIGHCHARTS PIE - 应用AJAX，REFRESH CHART

Question

Im new in JS/AJAX/JSON, I want to apply ajax to my code so my chart can redraw depend on data gets in database. This line of code has no errors, but not refreshing by itself. Please help me to make this chart dynamic. help/Comments/Suggestions are appreciated.

Here's my code: data.php

$<?php
$con = mysql_connect("localhost","root","");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("survey_processor", $con);

$result = mysql_query("select msv_variants.var_text, B.Count from msv_variants, (SELECT           ans_var_id ,count(*) AS Count FROM (select ans_var_id from msv_answers where ans_que_id = '11') as A group by ans_var_id) AS B where msv_variants.var_opt_id = B.ans_var_id AND msv_variants.var_que_id = '11' ");

$rows = array();
while($r = mysql_fetch_array($result)) {
$row[0] = $r[0];
$row[1] = $r[1];
array_push($rows,$row);
}

print json_encode($rows, JSON_NUMERIC_CHECK);

mysql_close($con);
?> 

pie.js

    $(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: []
            }]
        }

        $.getJSON("data.php", function(json) {
            options.series[0].data = json;
            chart = new Highcharts.Chart(options);
        });



    });   

please help me in my project. thankyou

Answer 1

You need to update data in that chart, for example:

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            // add code below:
            events: {
                load: function() {
                     var series = this.series[0];
                     setTimeout(function() {
                         $.getJSON("data.php", function(json) {
                             series.setData(json);
                         });
                     }
                }
            }
        },
        //rest of options and code
    };
});