javascript - AngularJS Chart file issues -


i'm relatively new angular, , tried customizing angular charts template. after saving files , attempting open html, nothing appears in browser. @ first thought may have been due typos or errors in source code, haven't found did wrong. error in 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]      }]     };    } 

you need register controller angular module.

something 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]           }]       };   }]); 

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -