如何用实时数据更新Highcharts？

Question

I've been looking for several days at various options for updating Highcharts data. All I have tried has not worked and I know it's my lack of programming skills that is stopping me. I've read the documentation in Highcharts but it doesn't give an example for calling a php file within a standard script but shows a randonm data generator!

Could someone help.

I have a floor plan that has items that change colour based on a desk being occupied or unoccupied. I'm using a PHP file to pull the data from an MSSQL server and it updates with the latest data when I refresh the page.

I would like to update the information every 5 seconds if possible but only update the data points not the page. I have other charts where I want to do the same thing.

Here is the chart code:

<script type="text/javascript">  // PLAN INDICATING OCCUPIED OR UNOCCUPIED DESKS
        $(function() {
    $('#chart1').highcharts({
        chart: {
            plotBackgroundImage: '/Highcharts/graphics/HSSMIPLAN.png',
            height: 600,
            animation: false
        },

        credits: {
            enabled: false
        },

        title: {
        text: null      //'HSSMI Occupancy Plan (Live)'
    },

        xAxis: {
        min: 0,
        max: 1000,
        labels: {enabled:false},
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0
    },

        yAxis: {
        min: 0,
        max: 600,
        title: false,
        gridLineWidth: 0,
        labels: {enabled:false},
        lineColor: 'transparent',
    },

    legend: {
            enabled: false
        },

    plotOptions: {
        series: {
            cursor: 'ns-resize',
            point: {
                events: {
                    drag: function (e) {
                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
                    }
                }
            },
            //stickyTracking: false
        },

    },

    tooltip: {
            borderColor: 'rgb(43, 110, 151)',
            formatter: function () {
                return 'Sensor: <b>'+ this.point.name + '</b><br>X Value: <b>' +
                    this.point.x + '<br>Y Value: <b>' + this.point.y +'</b>';
            }
        },

    series: [{
        type: 'bubble',
        minSize: 25,
        maxSize: 25,
        cursor: 'pointer',
        draggableX: false,
        draggableY: false,
        data: [<?php echo $data12a?>]
        }]

    });


$('#getcsv').click(function () {
    var csv = "Series;Name;X;Y\n";
    $.each(Highcharts.charts[0].series, function(i,s){
        $.each(s.points, function(j,p){
            csv += s.name + ";" + p.name + ";" + p.x + ";" + p.y + "\n";
        });
    });
    alert(csv);
});

});

        </script>

I've been looking at various option but not sure where or how to add the code to the existing script.

I saw this for updating a table and thought it may be close to what I need:

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

As always any help you can give would be appreciated.

Thanks Rob

Answer 1

使用方法setData Highcharts - setData