how to load google charts in angularjs

how to load google charts in angularjs  using -'share'

I want to create a directive that can be feed with data from a controller, and show google charts. But the following does not work:

<div google-chart gdata="test"></div>

angular.module('test').controller('myController', myController);

function myController($scope) {

    $scope.test = [
                 ['one', 'two', 'three'],

angular.module('test').directive('googleChart', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            gdata: '='
        link: function($scope, $elm, $attr) {

                var data = new google.visualization.arrayToDataTable(gdata);

                var chart = new google.visualization.LineChart($elm[0]);
                chart.draw(data, options);

google.load('visualization', '1', {packages: ['corechart']});

The console prints undifined and shows an error Error: gdata is not defined.

Why is gdata not defined? I have in the the div tag as well as in scope of the directive.?

asked Oct 13, 2015 by nimisha.jagtap
0 votes

1 Answer

0 votes

I can't test it as, there is no plunker or fiddler, but can you try using console.log($scope.gdata); and

var data = new google.visualization.arrayToDataTable($scope.gdata);
answered Oct 13, 2015 by shikhar jain