Transition animation support

[angular-google-chart]

Transition animation support

[bouil]

That may work if your chart data is already an instance of google.visualization.DataTable and if you set the appropriate chart options. But I never tried it.

[subarroca]

Can this be done directly through this package or should I load something else?

[bouil]

Everything should be here to test it

[tclift]

I have tested at it works as expected by either modifying the structure of the data literal object of the chart, or by using DataTable and its functions to add/remove/change.

However, in both cases the graph is not automatically redrawn. I can see in the source there is a deep $watch on on the chart, but something about it seems not to work. The redraw on window resize does work, so we know that the drawAsync() function is doing its job.

A workaround is to do something like $($window).resize() after changing the data to trigger a redraw.

[nbering]

I tested this out with angular-google-charts v0.0.10. Looks like now that we're keeping the ChartWrapper object is being kept and updated between draws this works properly. I simply added the animation properties to my options and it worked (although it was awkward with my particular application, so I immediately took it back out again).

[tclift]

Confirmed. Redraw now occurs automatically (window resize workaround no longer required). Thank you.

[leojplin]

Redraws does occur automatically, but it is not animated when animation option is set. So I still can't get animation to work? Is there any doc to help ?

[nbering]

@leoxy520 There's not much by way of docs for this project (I'm working on a few things here and there in what little spare time I have.) If you give me a little more to go on, I might be able to help you. Can you show me some code?

[leojplin]

app.controller("myBarChartController", ['$scope', '$timeout',
function ($scope, $timeout) {
$scope.chartObject = {
type : 'BarChart',
options : {
'height': 400,
animation: {
duration: 500,
easing: 'out'
}
},
};
var data = [['dsa', 'das' ]];
data.push(['1', 1]);
data.push(['2', 2]);
data.push(['3', 3]);

(function getData() {
    for (var i = 1; i < data.length; i++) {
        data[i][1] = data[i][1] * 1.2;
    }
    $scope.chartObject.data = window.google.visualization.arrayToDataTable(data);
    $timeout(getData, 1000);

})();

}]);

So I have set a "forever" timeout to update the data of the chart. I can see the chart update its data, but it is not animated.

Btw, is there a way to get access to google.visualization function without me loading the google api again like this in the head?

<script src="components/angular-google-chart/ng-google-chart.js"></script>
<script>
    google.load('visualization', '1', { 'packages': ['corechart'] });
</script>

[nbering]

The API is accessible as a promise passed by a service in the same file as the directive.

app.controller('myBarChartController', ['$scope', '$timeout', 'googleChartApiPromise',
function($scope, $timeout, googleChartApiPromise){
  googleChartApiPromise.then(function (){
    //Do whatever you need the api for.
  });
}]);

I think the problem is that to animate properly you need to be working with the same instance of the dataTable. Try basically what you're already doing, except run your function after the API promise has resolved, and only run the arrayToDataTable() once. After that, add data using the Google DataTable's addRow() method. This should trigger the animations. I did get animations working earlier, but I must confess that I was manipulating the view rather than the data, so I haven't tested it this way.

[leojplin]

googleChartApiPromise.then(function () {
$scope.chartObject.data = google.visualization.arrayToDataTable(data);
(function getData() {
for (var i = 1; i < data.length; i++) {
$scope.chartObject.data.setValue(i - 1, 1, $scope.chartObject.data.getValue(i - 1, 1) * 1.2);

        }
        $scope.chartObject.data.addRow(['asd', 5]);
        $timeout(getData, 2000);
    })();
});

Okay, I have tried manipulating the data using the data table api, changing cells or adding rows, still no animation. The option to set animation is the same as documented at google's website right?

[nbering]

$scope.chartObect.options = {
  animation: {
    duration: 1000,
    easing: 'in'
  },
  width: 450,
  height: 450
}

Yes, the same as the documentation states.