CODEWITHSUNDEEP
angularjsgoogle-visualization
gst
gst

Reputation: 25

I am trying to make a chart using google-chart directive.But my chart is not displaying

I am trying to make pieCharts, Barcharts using angular google charts . I have made a colChartObject and assign data to it and several other options like size,colors but nothing is displaying on the browser.I tried the same using my custom directive too but had the same problem . Can anyone please let me know the problem in my code??

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>

</head>
<body ng-app = "ngapp">
    <div ng-controller="ChartController">
        <div google-chart chart="colChartObject"></div>
     </div>
</body>
</html>

JS

var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
    $scope.colChartObject={};
    $scope.colChartObject.type = "PieChart"; //setting chart type
    $scope.colChartObject.displayed = true;

    $scope.Colors = [
        ['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
        ['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
        ['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
        ['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
    ];

   // $scope.colChartObject.data = $scope.data; //setting chart data
    //setting chart options
    $scope.colChartObject.options = {
        title: 'nothing special',              //chart title
        isStacked: 'true',        //chart is stacked or not
        titleTextStyle: { color: '#000000', 
        fontName: 'Open Sans', fontSize: 16, 
                     bold: true, italic: false },  //title style
        height: 250,  
        colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)]  //colors
    };

    $scope.colChartObject.data= {
        cols: [                
            {
                id: "month",
                label: "Month",
                type: "string"
            },
            {
                id: "Tables-id",
                label: "Tables",
                type: "number"
            },
            {
                id: "Chairs-id",
                label: "Chairs",
                type: "number"
            },
            {
                id: "Bed-id",
                label: "Bed",
                type: "number"
            },
            {
                id: "Desk-id",
                label: "Desk",
                type: "number"
            }
        ],
        rows: [             
            {
                c: [
                    {
                        v: "January"
                    },
                    {
                        v: 19,          //value required to plot chart
                        f: "19 Tables"  //description which is shown on mouse hover
                    },
                    {
                        v: 12,
                        f: "12 Chairs"
                    },
                    {
                        v: 7,
                        f: "7 Beds"
                    },
                    {
                        v: 4,
                        f: "4 Desks"
                    }
                ]
            },
            {
                c: [
                    {
                        v: "February"
                    },
                    {
                        v: 13
                    },
                    {
                        v: 1,
                        f: "only 1unit"
                    },
                    {
                        v: 12
                    },
                    {
                        v: 2
                    }
                ]
            },
            {
                c: [
                    {
                        v: "March"
                    },
                    {
                        v: 24
                    },
                    {
                        v: 5
                    },
                    {
                        v: 11
                    },
                    {
                        v: 6
                    }
                ]
            }
        ]
    }
});

Upvotes: 0

Views: 98

Answers (1)

Julien
Julien

Reputation: 2246

You forgot to declare the module of "google-chart" as a dependency of your module "ngapp".

You have to change 

  var app = angular.module('ngapp', []);

to 

  var app = angular.module('ngapp', ['googlechart']);

Upvotes: 1

Related Questions