Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

I'm new to angular JS. Could you please help me for below requirement

Requirement: How to pass the restful api data which is in json format and render the data in google charts and display in html.

Regards Satyanvesh

share|improve this question

use google-charts directive. example in here

    //load the google chart & table library
    google.load('visualization', '1', {
        packages: ['corechart', 'table']
    });

    //declare our chartWrapModule, in write up we had this in a separate file called googleChartWrap.js.
    angular.module('googleChartWrap', [])
        .directive('googleChart', function () {
        return {
            restrict: 'A',
            link: function ($scope, $elm, $attr) {
                //watch the actual property since haveWantStats will point to a resource and exist almost immediately even prior to pulling the data.
                $scope.$watch($attr.data, function (value) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'name');
                    data.addColumn('number', 'votes');

                    angular.forEach(value, function (row) {
                        data.addRow([row.name, row.votes]);
                    });

                    var options = {
                        title: $attr.title,
                        height: $attr.height,
                        width: $attr.width,
                        legend: 'bottom'
                    };

                    //render the desired chart based on the type attribute provided
                    var chart;
                    switch ($attr.type) {
                        case ('PieChart'):
                            chart = new google.visualization.PieChart($elm[0]);
                            break;
                        case ('ColumnChart'):
                            chart = new google.visualization.ColumnChart($elm[0]);
                            break;
                        case ('BarChart'):
                            chart = new google.visualization.BarChart($elm[0]);
                            break;
                        case ('Table'):
                            chart = new google.visualization.Table($elm[0]);
                            break;
                    }
                    chart.draw(data, options);
                });
            }
        }
    });


    //declare our angular module, injecting the 'googleChartWrap' module as a dependency
    angular.module('myApp', ['googleChartWrap'])
        .controller('coffeeController', function ($scope) {
        /**
         *  provide some data to use in our charts. On a real project you'd usually
         *  use an angular service to retrieve data from a web service endpoint somewhere.
         */
        $scope.coffeeData = [{
            "name": "Starbucks",
                "votes": 36
        }, {
            "name": "Costa",
                "votes": 34
        }, {
            "name": "Coffee Bean",
                "votes": 30
        }];
    });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.