在Highcharts中自动刷新Json数据

Question

I've been working this for past 4 days but still can figure out how to solve this issue:

1. The data in the database changes every 5 minutes.
2. I want to display the data in a new chart without refreshing the whole page.

CODE:

$(function () {
    $(document).ready(function() {
        $.getJSON("test2.php", function(json) {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            $('#container').highcharts({
                renderTo: 'container',
                defaultSeriesType: 'spline',
                chart: {
                    type: 'area',
                },
                title: {
                    text: 'Transaction Count'
                },
                subtitle: {
                    text: '5 Minutes Count'
                },
                exporting: { 
                    enabled: false 
                },
                xAxis: {
                    categories:json,
                    title:{
                        text: 'Time Of The Day',
                        style: {
                            color: '#666666',
                                fontSize: '12px',
                                fontWeight: 'normal'
                            }
                        },
                        tickInterval: 4,
                        type: 'datetime',
                        labels: {
                            style: {
                                fontFamily: 'Tahoma'
                            },
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Number Of Transaction'
                        },
                        labels: {
                            formatter: function () {
                                return this.value;
                            }
                        }
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y:,.0f}</b>'
                    },
                    plotOptions: {
                        column: {colorByPoint: true},
                        area: {
                            marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                colors: [
                    'green',  //Buy
                    '#4572A7' //Paid
                ],
                series: json
            });
        });
    });
});

Answer 1

You can change the dataset, like this :

$('#container').highcharts().series[0].setData([129.2,144.0,...], false);

You can redraw, like this :

$('#container').highcharts().redraw();

So, what you need to do, is create a function that (1) first gets the data from the server, (2) then updates the data and (3) then redraws, like this :

var updateChart = function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}

To repeat this every 5 minutes, you can use setInterval , like this :

setInterval(function() {
    $.getJSON('test2.json', function(data) {
        var chart = $('#container').highcharts();
        $.each(data, function(pos, serie) {
            chart.series[pos].setData(serie, false);
        });
        chart.redraw();
    });
}, 300000);

Answer 2

Instead of putting your Highchart script in the document.ready function, you can create a funcion getHighchart and put the code about into it. and depend on how many seconds you want the code to readload as below, but you have to be referencing the jquery js.

$(function () {
    setInterval(getHighChart, 30000); //30 seconds onload="getHighChart()" 
});

function getHighChart() {
    //to containe you script for loading the chart
}