Screen gets unresponsive for Realtime charts

[praveenaj]

Hi,

I update the random values to simulate a realtime chart, using an $interval. After a few seconds the screen gets unresponsive. Here's my code. Any tips?

//
        // Rickshaw Realtime
        // -----------------

        var seriesData = [
            [],
            [],
            []
        ];
        var random = new Rickshaw.Fixtures.RandomData(50);
        for (var i = 0; i < 50; i++) {
            random.addData(seriesData);
        }

        $scope.rickshaw_realtime_options = {
            renderer: 'area',
            height: 500,
            padding: {
                top: 0.5
            }

        };

        $scope.rickshaw_realtime_series = [{
            data: seriesData[0],
            color: 'red',
            name: 'DB Server'
        }, {
            data: seriesData[1],
            color: 'blue',
            name: 'Web Server'
        }];

        $scope.rickshaw_realtime_features = {
            yAxis: {
                orientation: 'right',
                tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
            },
            hover: true,
        }

        // Update the graph with realtime data. 
        var timer = $interval(function() {
            random.removeData(seriesData);
            random.addData(seriesData);
        }, 1000);

        $scope.$on('$destroy', function() {
            if (angular.isDefined(timer)) {
                $interval.cancel(timer);
                timer = undefined;
            }
        });