CODEWITHSUNDEEP
javascripthtmlangularjs
Nick Borisenko
Nick Borisenko

Reputation: 494

AngularJS Chart file issues

I'm relatively new to angular, and tried customizing an angular charts template. However after saving the files and attempting to open the html, nothing appears in the browser. At first I thought this may have been due to typos or errors in my source code, but I haven't found what I did wrong. Where is the error in my code?

My markup:

    <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
      <meta charset="utf-8" />
      <title>Angular Chart</title>
      <script src="http://code.angularjs.org/1.2.2/angular.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
      <script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>
      <script src="script.js"></script>
    </head>

    <body ng-controller="MainCtrl">
      <div 
        data-ac-chart="'line'" 
        data-ac-data="data" 
        data-ac-config="config" 
        class="chart">
      </div>
    </body>

    </html>

My JS: 

    var myApp = angular.module('myApp', ['angularCharts']);

    function MainCtrl($scope) {
    $scope.config = {
    title: 'Products',
    tooltips: true,
    labels: false,
    mouseover: function() {},
    mouseout: function() {},
    click: function() {},
    legend: {
    display: true,
    position: 'right'
   }
  };

   $scope.data = {
     series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
     data: [{
       x: "Laptops",
       y: [100, 500, 0]
     }, {
       x: "Desktops",
       y: [300, 100, 100]
     }, {
       x: "Mobiles",
       y: [351]
     }, {
       x: "Tablets",
       y: [54, 0, 879]
     }]
    };
   }

Upvotes: 2

Views: 306

Answers (1)

Andrew Shepherd
Andrew Shepherd

Reputation: 45232

You need to register your controller with the Angular module.

Something like this:

  var myApp = angular.module('myApp', ['angularCharts']);

  myApp.controller("MainCtrl", ['$scope', function ($scope) {
      $scope.config = {
          title: 'Products',
          tooltips: true,
          labels: false,
          mouseover: function () {},
          mouseout: function () {},
          click: function () {},
          legend: {
              display: true,
              position: 'right'
          }
      };

      $scope.data = {
          series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
          data: [{
              x: "Laptops",
              y: [100, 500, 0]
          }, {
              x: "Desktops",
              y: [300, 100, 100]
          }, {
              x: "Mobiles",
              y: [351]
          }, {
              x: "Tablets",
              y: [54, 0, 879]
          }]
      };
  }]);

Upvotes: 2

Related Questions