Open
Description
I am trying to create line chart with angularjs and chart.js below is my code:
<link rel="stylesheet"
href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script
src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script
src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script
src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
var app = angular.module('myAPP', ['chart.js'])
app.controller('ChartController', function ($scope, $http) {
$scope.counter = [1, 2, 3]
$scope.labels = []
$scope.data = []
$scope.labels[ 1 ] = [1, 2, 3, 4]
$scope.labels[ 2 ] = [1, 2, 3]
$scope.labels[ 3 ] = [1, 2, 3, 4, 5]
$scope.data[ 1 ] = [1, 2, 0, 4]
$scope.data[ 2 ] = [5, 1, 7]
$scope.data[ 3 ] = [5, 6, 2, 8, 9]
$scope.chartOptions = {
legend: {
display: true,
},
title: {
display: true,
text: 'title'
}
}
})
</script>
<body ng-app="myAPP" ng-controller="ChartController">
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['{{n}}']"
chart-labels="labels['{{n}}']"
/>
</div>
</body>
here i am creating canvas using ng-repeat
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['{{n}}']"
chart-labels="labels['{{n}}']"
/>
</div>
but unfortunately no chart is rendered, but when i type data and label tags manually like below, charts are shown.
<div ng-repeat="n in counter">
<canvas
class="chart chart-line"
chart-options="chartOptions"
chart-data="data['1']"
chart-labels="labels['1']"
/>
</div>
below are 2 examples:
working example
not working example
would you please help me find out what am i doing wrong in "not working example"?
Metadata
Metadata
Assignees
Labels
No labels