CODEWITHSUNDEEP
javascriptjqueryangularjshighchartsreal-time
user3129120
user3129120

Reputation: 113

highcharts with only javascript and no jquery

So without jquery I want to update highcharts with new data live. I have a chart that displays data from a database, and I am doing a http get request to get the data every few seconds. I am able to grab the data correctly, but when I push the new data onto the series variable for the chart, the graph doesn't update in real time. It only updates when I refresh. How can I fix this? I am using highcharts in angularjs.

Upvotes: 1

Views: 654

Answers (4)

Rui Sebastião
Rui Sebastião

Reputation: 883

Here is my solution for using Highcharts addPoint function in the highcharts-ng directive:

$scope.chart_realtimeForceConfig = {
        options: {
            chart: {
                type: 'line',
            },
            plotOptions: {
                series: {
                    animation: false                                
                },               
            },           
        },
        series: [
            {
                name: 'Fx',
                data: []          
            },          
        ],
        func: function(chart) {
            $timeout(function() {
                chart.reflow();
                $scope.highchart = chart;
            }, 300);

            socket.on('ati_sensordata', function(data) {
                if (data) {
                    var splited = data.split('|');

                        if (splited.length >= 6) {
                            var val = parseFloat(splited[5]);
                            var shift = chart.series[0].data.length > 100;
                            chart.series[0].addPoint(val, true, shift, false);

                    }
                }
            });


        },
        loading: false
    }

Upvotes: 0

sylwester
sylwester

Reputation: 16498

From your code it looks like you want to add new series rather then new data if yes please see here: http://jsfiddle.net/bYx4a/

var app = angular.module('app', ["highcharts-ng"]);

app.controller("myCtrl", ['$scope', '$http', function ($scope, $http) {
    var count = 0;

    $scope.chartOptions = {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },

        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }]
    };

    $scope.addSeries = function () {

        var newData = {
            name: 'John',
            data: [1, 4, 3]
        };

        $scope.chartOptions.series.push({
            name: newData.name,
            data: newData.data
        })



    };

}]);

Upvotes: 0

sylwester
sylwester

Reputation: 16498

please see here http://jsfiddle.net/9m3fg/1

js:

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {

    $scope.addPoints = function () {
        var seriesArray = $scope.chartConfig.series
        var newValue = Math.floor((Math.random() * 10) + 1);
        $scope.chartConfig.xAxis.currentMax++;
        //if you've got one series push new value to that series    

        seriesArray[0].data.push(newValue);
    };



    $scope.chartConfig = {
        options: {
            chart: {
                type: 'line',
                zoomType: 'x'
            }
        },
        series: [{
            data: [10, 15, 12, 8, 7, 1, 1, 19, 15, 10]
        }],
        title: {
            text: 'Hello'
        },
        xAxis: {
            currentMin: 0,
            currentMax: 10,
            minRange: 1
        },
        loading: false
    }

});

Upvotes: 0

steeno
steeno

Reputation: 96

you should call series.addPoint() instead of just updating the data array

Upvotes: 1

Related Questions