Rickshaw realtime chart in AngularJS becomes unresponsive after a few seconds of running

Question

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. I'm using angular-rickshaw directive from https://github.com/ngyewch/angular-rickshaw

    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;
        }
    });