I am developing an Angularjs application.
I am using ocLazyLoad and ui.router.
I have a controller and two views with graphs using chart.js and angular-nvd3.
The graphics appear but keeps giving this mistake:
Error: ng:areq Bad Argument
and
angular.js:13550 Error: [ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=ChartCtrl&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
MY app.js::
.state('dashboard.chart',{
templateUrl:'views/chart.html',
url:'/chart',
controller:'ChartCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'chart.js',
files:[
'bower_components/angular-chart.js/dist/angular-chart.min.js',
'bower_components/angular-chart.js/dist/angular-chart.css'
]
}),
$ocLazyLoad.load({
name:'sbAdminApp',
files:['scripts/controllers/chartContoller.js']
})
}
}
})
.state('dashboard.graficohora',{
templateUrl:'views/graficohora.html',
url:'/graficohora',
controller:'GraficohoraCtrl',
resolve: {
loadMyFile:function($ocLazyLoad) {
return $ocLazyLoad.load({
name:'nvd3',
files:[
'bower_components/d3/d3.js',
'bower_components/nvd3/build/nv.d3.js',
'bower_components/angular-nvd3/dist/angular-nvd3.js',
]
}),
$ocLazyLoad.load({
name:'sbAdminApp',
files:['scripts/controllers/graficohoraController.js']
})
}
}
MY CONTROLLER::
angular.module('sbAdminApp')
.controller('GraficohoraCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
};
getData()
function getData(){
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
}
}]);
MY HTML::
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Charts</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<div class="row">
<div class="col-lg-12 col-sm-12" id="polar area-chart" ng-controller="ChartCtrl">
<div class="panel panel-default">
<div class="panel-heading">Informações sobre Dados Analisados</div>
<div class="panel-body">
<div ng-controller="ChartCtrl">
<nvd3 options='options' data='data'></nvd3>
</div>
</div>
</div>
</div>
</div>
Can you please help me with this error?
thanks..
The ng-controller on the html file was on the wrong place causing this error.
You never define the 'ChartCtrl' in your app module.
Add this to your app module.
.controller('ChartCtrl',['$scope', function ($scope) {
// add functionality to your controller
}]);
Related
I am tying to use malhar-angular-dashboard to add widget to my application.
https://github.com/dtpublic/malhar-angular-dashboard
I am just experimenting tying to add a widget to a tab in my web application.
Here is the View:
<html>
<head>
<script src = "/portal_demo/lib/1_6_10/angular.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-animate.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-aria.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-messages.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-cookies.js"></script>
<script src = "/portal_demo/lib/1_6_10/angular-route.js"></script>
<script src = "/portal_demo/lib/1_1_9/angular-material.js"></script>
<script src = "/portal_demo/lib/2_5_0/ui-bootstrap-tpls-2.5.0.js"></script>
<script src = "mainController.js"></script>
<link rel = "stylesheet" href = "/portal_demo/lib/3_3_7/bootstrap.css">
<link rel = "stylesheet" href = "/portal_demo/lib/1_1_9/angular-material.css">
<link rel="stylesheet" href="/portal_demo/lib/dash/malhar-angular-dashboard.css">
<script src="/portal_demo/lib/dash/malhar-angular-dashboard.js"></script>
<script src="/portal_demo/lib/dash/sortable.js"></script>
</head>
<body ng-app = "classApp" ng-controller="mainController" >
<header style="position: relative;">
<h2 style="display: inline-block;">Portal</h2>
</header>
<md-content>
<!--- home page for default user --->
<md-tabs md-dynamic-height="" md-stretch-tabs="never" md-border-bottom="" style="background: #f5f5f5;">
<md-tab label="MY VIEW" >
<md-content>
<div dashboard="dashboardOptions"></div>
</md-content>
</md-tab>
<md-tab label="PROJECT 1">
<md-content class="md-padding">
</md-content>
</md-tab>
</md-tabs>
</md-content>
</body>
</html>
Here is the Controller:
var app = angular.module("classApp", ['ngMaterial','ngAnimate', 'ui.bootstrap','ngRoute', 'ui.dashboard']);
//Main Controller
app.controller("mainController", mainController);
function mainController($scope, $http, $window, $window, $location, widgetDefinitions, defaultWidgets) {
//run initMain function during initialization
initMain();
function initMain() {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'explicitSave',
explicitSave: true
};
}
};
However, currently I am getting this error:
Error: [$injector:unpr] Unknown provider: widgetDefinitionsProvider <- widgetDefinitions <- mainController
I am just tying to define a default widget, add it to dashboardOptions and then display it in my view using . The widgetDefinitions should already be defined in malhar-angular-dashboard.js. Am I missing a library or is there something else I am doing wrong.
You are not missing any library, it's just that you have to have a factory which returns your widget definitions, for example.
.factory('widgetDefinitions', function (RandomDataModel, MyChartDataModel) {
return [
{
name: 'random',
directive: 'wt-scope-watch',
attrs: {
value: 'randomValue'
}
},
{
name: 'time',
directive: 'wt-time'
},
{
name: 'datamodel',
directive: 'wt-scope-watch',
dataAttrName: 'value',
dataModelType: RandomDataModel
},
{
name: 'resizable',
templateUrl: 'template/resizable.html',
attrs: {
class: 'demo-widget-resizable'
}
},
{
name: 'fluid',
directive: 'wt-fluid',
size: {
width: '50%',
height: '250px'
}
},
{
name: 'My Chart',
directive: 'wt-my-chart',
attrs: {
config: 'config',
toolbar: {
icons: [
'glyphicon glyphicon-tags',
'glyphicon glyphicon-film'
]
}
},
size: {
width: '50%',
height: '250px'
}
}
];
})
.value('defaultWidgets', [
{name: 'random'},
{name: 'time'},
{name: 'datamodel'},
{
name: 'random',
style: {
width: '50%'
}
},
{
name: 'time',
style: {
width: '50%'
}
},
{name: 'My Chart'}
])
.controller('DemoCtrl', function ($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
$scope.dashboardOptions = {
widgetButtons: true,
widgetDefinitions: widgetDefinitions,
defaultWidgets: defaultWidgets,
storage: $window.localStorage,
storageId: 'demo_simple'
};
$scope.randomValue = Math.random();
$scope.config = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Demo'
},
loading: false
};
$interval(function () {
$scope.randomValue = Math.random();
}, 5000);
$scope.doCallback = function () {
console.log('execute callback...');
}
});
I am using AngularJS v1.6.6 and angular-chart v.1.1.1 to display a chart in my application.
Here is the fiddle: https://jsfiddle.net/elenat82/w9gs3fqt/3/
And here is the code:
HTML:
<div class="container" ng-app="app" ng-controller="ChartCtrl">
<div class="row">
<div class="col-md-6">
<canvas
id="base"
class="chart-base"
chart-data="datas"
chart-labels="labelsdata"
chart-series="series"
chart-type="type"
chart-options="options">
</canvas>
</div>
</div>
JS:
angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
$scope.datas = [
[132],
[170],
[2.50],
[45.67],
[154],
[89],
[111],
[160],
[94]
];
$scope.labelsdata = ["today"];
$scope.series = ["label1", "label2", "label3", "label4", "label5", "label6", "label7", "label8", "label9"];
if ($scope.labelsdata.length > 1) {
$scope.type = 'line';
}
else {
$scope.type = 'bar';
}
$scope.options = {
scales: {
yAxes: [
{id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'},
{id: 'y-axis-2',
type: 'linear' ,
display: true,
position: 'right'}
]
}
}
});
What I would like to do is to display the same Y axe on both sides of the chart, with the same scale, now the left Y axe is ok but the right one shows weird values.... I want right Y axe to be exactly the same I have on the left side. If I understand correctly this http://www.chartjs.org/docs/latest/axes/cartesian/#axis-id you can use separate Y axes for differents datasets but this is not what I want.
Also I would like to have the labels always shown, not only when I hover the bars, now it's hard to figure out what every bar is related to .....
You can define custom ticks for both sides of y-axis
https://jsfiddle.net/w9gs3fqt/13/
var axis_ticks = {
beginAtZero: true,
max:200,
min: 0,
stepSize: 50
};
$scope.options = {
scales: {
yAxes: [
{id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
ticks:axis_ticks
},
{id: 'y-axis-2',
type: 'linear' ,
display: true,
position: 'right',
ticks:axis_ticks
}
]
}
}
I want to push each object into an array when it is clicked. I am able to get a reference of each individual object but I'm not able to push the object into an array. It tells me push is not a function. I've spent so much time trying to figure this out. Can someone point me in the right direction?
angular.module('app', []);
angular.module('app').controller("MainController", function() {
var vm = this;
vm.ordered = {};
vm.menu = [{
title: 'Pizza',
type: 'entree',
favorite: true,
price: 10
}, {
title: 'Tacos',
type: 'entree',
favorite: false,
price: 5
}, {
title: 'Onion Rings',
type: 'app',
favorite: false,
price: 2
}, {
title: 'Ice Cream',
type: 'dessert',
favorite: false,
price: 11
}, {
title: 'Mac n Cheese',
type: 'app',
favorite: false,
price: 7
}, {
title: 'Salad',
type: 'salad',
favorite: true,
price: 4
}];
}).directive('section', function() {
return {
restrict: 'E',
link: function(scope, element) {
scope.ordered = {};
element.bind('click', function(event) {
console.log(scope.item);
scope.ordered.push(scope.item);
});
}
};
});;
.left {
float: left;
width: 50%;
}
.right {
float: left;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="left">
<h2>Lists One</h2>
<section id="{{item.id}}" ng-repeat="item in main.menu | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">
<strong>{{item.title}} </strong>
<span>$ {{item.price}}</span>
</section>
</div>
<div class="right">
<h2>Lists Two</h2>
<section id="{{item.id}}" ng-repeat="item in main.ordered | filter:main.searchInput | orderBy:main.order.key:main.order.reverse">
<strong>{{item.title}} </strong>
<span>$ {{item.price}}</span>
</section>
</div>
Change scope.ordered = {}; to scope.ordered = [];
I am trying to follow a simple example to make a pie chart but it does not render the chart. Even viewing the source, no chart code appears (only the original directive code). The controller is getting loaded as I do see the log file statement and the title property within the scope. I am not getting any errors to the console and a bit confused at the moment.
Thanks in advance
I am using the latest version of the libraries, added at the index.html file
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.7/angularjs-nvd3-directives.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.css"/>
Chart.html
<div >
<div ng-controller="chartsController" >
<div>
{{title}}
</div>
<nvd3ChartDirectives options="options" data="data" id="chartId" config="config" class="with-3d-shadow with-transitions">
</nvd3ChartDirectives>
</div>
</div>
Index.js
var app = angular.module('seApp', ['ngRoute', 'ngResource', 'ngMessages', 'ngAnimate', 'ui.bootstrap', 'smart-table', 'nvd3ChartDirectives']);
(Injecting as nvd3 does not work).
Chart.js
app.controller('chartsController', ['$scope', '$log', function($scope, $log) {
$scope.title = 'Chart Title';
$log.info ("Create Chart");
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
width: 600,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
}
}
}
$scope.config = {
visible: true, // default: true
extended: false, // default: false
disabled: false, // default: false
autorefresh: true, // default: true
refreshDataOnly: false, // default: false
deepWatchOptions: true, // default: true
deepWatchData: false, // default: false
deepWatchConfig: true, // default: true
debounce: 10 // default: 10
};
$scope.xFunction = function(){
return function(d){
return d.key;
};
};
$scope.yFunction = function(){
return function(d){
return d.y;
};
};
$scope.data = [
{
key: "435fdfg",
y: 16
},
{
key: "fgfsgsg",
y: 12
},
{
key: "lodfrr",
y: 3
},
{
key: "yuiiyui",
y: 7
},
{
key: "adffd",
y: 4
}
]
}]);
I had a similar problem. After using ng-inspector I found out that the options where not passed in correctly due to a typo).
I did however tried to register the dependency with "nvd3ChartDirectives" but received an exception so I just used nvd3. Maybe this could be a possible problem.
I would recommend doing some debugging with ng-inspector or Batarang and check that the scope is set properly.
BTW, I'm using Angular 1.4.8.
I am using nvd3.js to create a pie chart.
I would like to export this chart to Excel.
For export I am using FileSaver.js
My HTML looks like:
<body ng-controller="MainCtrl">
<button ng-click="exportData()">click</button>
<div id="charts">
<nvd3 options="options" data="data"></nvd3>
</div>
</body>
My code looks like:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.exportData = function () {
alert("function call");
var blob = new Blob([document.getElementById('charts').innerHTML ], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
transitionDuration: 500,
labelThreshold: 0.01,
legend: {
margin: {
top: 10,
right: 35,
bottom: 5,
left: 0
}
},
}
};
$scope.data = [
{
key: "suraj",
y: 5
},
{
key: "darshan",
y: 2
},
{
key: "kapil",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
});
Thanks for your help!