Having some trouble creating a chart with angular.js. The chart is not appearing on the page when using rout.js, but it works fine without it. Here's my code:
var myapp = angular.module('myapp', ['angularCharts']);
function D3Controller($scope) {
console.log("Entering Scope");
$scope.config = {
title: 'Products',
tooltips: true,
labels: false,
mouseover: function () {
},
mouseout: function () {
},
click: function () {
},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
}
console.log("And here we are in $scope." + $scope.config.title );
;
$scope.data = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
}
console.log("And here we are in $scope.data.sereis" + $scope.data.series );
;
}
rout.js
'use strict';
myappApp.config(function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
$routeProvider
.when('/d3', {
templateUrl: 'views/d3/d3.html',
controller: 'D3Controller',
access: {
authorizedRoles: [USER_ROLES.all]
}
})
});
html page
<div ng-controller="D3Controller" >
<div id="d3-chart" style="width: 100%; height: 500px; padding: 0px; position: relative;">
<div
data-ac-chart="'bar'"
data-ac-data="data"
data-ac-config="config"
class="chart">
</div>
<input ng-model="config.title" style="width: 100%;"/>
<br>
<input ng-model="data.series" style="width: 100%;"/>
<br>
<input ng-model="data.data" style="width: 100%;"/>
</div>
</div>
If anyone can assist with this issue, I would greatly appreciate it.