trying to dynamically update Highchart column chart but series undefined

Question

I am trying to update an existing highcharts column chart with new information from a service. I am trying to do this by using the setdata method on the series but the series in "undefined". I am very new to this type of programming so I have no ideal what I am doing wrong. Any help would be greatly appreciated. My Code is below:

$('#chart22').highcharts({
    colors: ['#FBB369', '#7798BF'],
chart: {
    type: 'column'
},
title: {
    text: 'Some Data'
},
xAxis: {
    categories: ['Cat1', 'Cat2']

},
yAxis: {
    title: {
        text: 'Amount'
    },
    labels: {
        formatter: function() {
            return this.value / 1000000000 +'B';
        }
    }
},
credits: {
    enabled: false
},
exporting: { 
    enabled: false 
},
series: [{
    name: 'Amount',
    data: [-3450000000.25, 3670000000.35]

   }]
});


setInterval(function() { getData(); }, 30000);


function getData(){

    console.log("retrieving data from server ");
    var url = "http://localhost/someserver call";

    $.getJSON (url, function (Data44) {
        var data = data44; //we are good here

        // update the series data

        chart22.series[0].setData(data);
        chart22.series.setData(data);  //both give the error that series is undefined ????

    });
}

Answer 1

You haven't created the variable chart22 so it's no surprise that properties are undefined.

Try this

var timerId = setInterval(function() {
    console.log("retrieving data from server ");
    var url = "http://localhost/someserver call";

    $.getJSON(url, function(data) {
        $('#chart22').highcharts().series[0].setData(data);
    });
}, 30000);

The JSFiddle demo for Series.setData should have shown you exactly what to do.