Updating highcharts dynamically with json response

Question

I am trying to draw highcharts with the json response, however I can able to draw for the first time, but unable to update the series with new data

function get_chart(data) {
    //alert('hello..' + data);

        return {
            xAxis: {        
                type: 'datetime',
                labels: {
                    formatter: function() {
                        var monthStr = Highcharts.dateFormat('%b', this.value);
                        var firstLetter = monthStr.substring(0, 1);
                        return firstLetter;
                    }
                }
            },
            title: {
                text: data.measurementName
            },
            chart: {
                height: 300,
                width: 500,
                type: 'column',
                zoomType: 'x'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                console.log ('Category: '+ this.category +', value: '+ this.y);
                            }
                        }
                    }
                }
            },

            series: [{
                    name: 'Hours',
                    data: (function() {
                        var chart = [{key:data.measurementName, values:[]}];

                        var i = 0;
                        if(typeof(data) == 'string')return chart;

                        for(n in data.values){
                            data.values[n].snapshot = new Date(data.values[n].snapshot);
                            data.values[n].value = parseInt(data.values[n].value);
                        }

                        chart[0].values = data.values.map(function(arrayObj){
                            return [arrayObj.value]
                        });

                        return  chart[0].values;
                    })()
                }]
        };
    } 

and I am calling this function like

$scope.renderChart = function(measurement){
        $scope.showChart = false;

        restApp.getMeasurementForCompID(comp.id, measurement.id).then(function(data){

            console.log(data);

            $scope.example_chart = get_chart(data);
            console.log($scope.example_chart);

            $scope.showChart = true;
        });

    }

Here getMeasurementForCompID is another function which gets the data from database. What is the problem here? any help..

Answer 1

I used https://github.com/pablojim/highcharts-ng

I just alter the data object and the highcharts reflects the change.