3

I wonder how I should go about having better animations when adding points to a area plot. In regular highcharts this is done pretty smooth but using highcharts-ng it rerenders a huge chunk of the chart.

I have two fiddels that shows the issue. Maby there is a simple way to solve this ?

Highcharts-ng http://jsfiddle.net/Cp73s/3399/

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {

    $scope.addPoints = function () {
        var seriesArray = $scope.highchartsNG.series
        var rndIdx = Math.floor(Math.random() *10+7);
        $scope.highchartsNG.series[0].data.push(rndIdx);

    };  

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'area'
            },
            plotOptions: {
                area: {
                    fillOpacity: 0.15,
                    dataLabels: {
                        allowOverlap: true,
                        enabled: true,
                        padding: 0,
                        style: {
                            fontSize: '25px'
                        }
                    },
                    enableMouseTracking: true
                }
            },
        },
        series: [{
            data: [10, 15, 12, 8, 7]
        }]
    }

});

Regular-highcharts http://jsfiddle.net/m8Lavyrc/3/

$(function () {
    $('#container').highcharts({
          chart: {
                type: 'area'
            },
                    plotOptions: {
                area: {
                    fillOpacity: 0.15,
                    dataLabels: {
                        allowOverlap: true,
                        enabled: true,
                        padding: 0,
                        style: {
                            fontSize: '25px'
                        }
                    },
                    enableMouseTracking: true
                }
            },

        series: [{
            data: [10, 15, 12, 8, 7]
        }]

    });


    // the button action
    var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.series[0].addPoint(Math.floor(Math.random() *10+7));        
    });
});

Tnx

Note89
  • 251
  • 1
  • 9

0 Answers0