Angular Charts Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<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>
</div>
JavaScript
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';
}
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
}
]
}
}
});