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
Post a Comment