I'm trying to use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.
Anyone has an idea? I've tried reordering the scripts a few times. I just can't figure it out. :(
Here is the html.
<html ng-app="profitly">
<head>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/Chart.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-chartjs.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="MainController" class="container-fluid">
<div class="wrapper" ng-view>
<article ng-controller="graph">
<cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>
</article>
</div>
</body>
<html>
And here is the app initialization:
var app = angular.module('profitly', ['ngRoute', 'chartjs']);
And here is the controller for this part:
app.controller('graph', function($scope) {
$scope.someData = {
labels: [
'Supply',
'May',
'Jun'
],
datasets: [
{
data: [1, 7, 15, 19, 31, 40]
},
{
data: [6, 12, 18, 24, 30, 36]
}
]
};
$scope.someOptions = {
segmentStrokeWidth: 20,
segmentStrokeColor: '#000'
};
});
I'm trying to use the angular-chartjs library but running into some issues. There are no errors on the page. But the canvas is empty.
Anyone has an idea? I've tried reordering the scripts a few times. I just can't figure it out. :(
Here is the html.
<html ng-app="profitly">
<head>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/Chart.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-chartjs.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="MainController" class="container-fluid">
<div class="wrapper" ng-view>
<article ng-controller="graph">
<cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>
</article>
</div>
</body>
<html>
And here is the app initialization:
var app = angular.module('profitly', ['ngRoute', 'chartjs']);
And here is the controller for this part:
app.controller('graph', function($scope) {
$scope.someData = {
labels: [
'Supply',
'May',
'Jun'
],
datasets: [
{
data: [1, 7, 15, 19, 31, 40]
},
{
data: [6, 12, 18, 24, 30, 36]
}
]
};
$scope.someOptions = {
segmentStrokeWidth: 20,
segmentStrokeColor: '#000'
};
});
2 Answers
Reset to default 5Someone else on my hack team figured it out later that day. Here is the HTML:
<article class="col-xs-6 col-md-offset-3 col-md-6 center">
<canvas id="expenses" width="200" height="100"></canvas>
<script>
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var expenses = document.getElementById("expenses").getContext("2d");
new Chart(expenses).Pie(pieData, pieOptions);
</script>
</article>
For more, our github repo (the view was the "cashflow.html" one) and to see how it rendered.
Probably not the best way to do it.
It looks like your missing ng-app in your HTML which would contain which angular app you will be using.
You can put it in the inside one of the divs wrapping the graph.