Posted by Line, Bar, and Radar Char Examples
| Note: The Chart.js plugin have being modified by the author and it is breaking up. I will be replacing this post if I don’t see the plugin being fixed soon and/or I will fix that plugin locally. |
Source Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS: Charts: Line, Bar, and Radar Chart</title>
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
<link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
<link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">
<div class="container">
<section id="directives">
<div class="col-lg-6 col-sm-12">
<tabset>
<tab heading="Line Chart" class="lineChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line"
class="chart chart-line"
chart-data="data"
chart-labels="labels"
chart-legend="true"
chart-click="onClick"
chart-hover="onHover"
chart-series="series"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Line Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr ng-repeat="dataSet in data">
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab heading="Bar Chart" class="barChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
<div class="panel panel-default">
<div class="panel-heading">Bar Chart</div>
<div class="panel-body">
<canvas id="bar"
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-series="series"
chart-options="options"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Bar Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr ng-repeat="dataSet in data">
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab heading="Radar Chart" class="radarChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
<div class="panel panel-default">
<div class="panel-heading">Radar Chart</div>
<div class="panel-body">
<canvas id="area" class="chart chart-radar" chart-data="data"
chart-labels="labels" chart-click="onClick"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Radar Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr ng-repeat="dataSet in data">
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</div>
</section>
</div>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
<script>
(function () {
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.config(function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
responsive: true
});
// Configure all doughnut charts
ChartJsProvider.setOptions('Doughnut', {
animateScale: true
});
});
app.controller('MenuCtrl', function ($scope) {
$scope.isCollapsed = true;
$scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
});
app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.labels = firstTabSharedLabels;
$scope.series = firstTabSharedSeries;
$scope.data = firstTabSharedData;
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.onHover = function (points) {
if (points.length > 0) {
console.log('Point', points[0].value);
} else {
console.log('No point');
}
};
$timeout(function () {
$scope.labels = firstTabSharedLabels;
$scope.series = firstTabSharedSeries;
$scope.data = firstTabSharedData;
}, 1000);
}]);
app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.options = { scaleShowVerticalLines: false };
$scope.labels = firstTabSharedLabels;
$scope.series = firstTabSharedSeries
$scope.data = firstTabSharedData;
$timeout(function () {
$scope.options = { scaleShowVerticalLines: true };
}, 1000);
}]);
app.controller('RadarCtrl', function ($scope) {
$scope.labels = firstTabSharedLabels;
$scope.data = firstTabSharedData;
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
});
})();
</script>
</body>
</html>
Doughnut and Pie Chart Examples
Source Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS: Charts: Doughnut and Pie Charts</title>
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
<link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
<link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">
<div class="container">
<section id="directives">
<div class="col-lg-6 col-sm-12">
<tabset>
<tab heading="Doughnut Chart" class="doughnutChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
<div class="panel panel-default">
<div class="panel-heading">Doughnut Chart</div>
<div class="panel-body">
<canvas id="doughnut"
class="chart chart-doughnut chart-xs"
chart-data="data"
chart-labels="labels"
chart-legend="true"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Doughnut Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr>
<td ng-repeat="set in data track by $index">{{data[$index]}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab heading="Pie Chart" class="pieChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
<div class="panel panel-default">
<div class="panel-heading">Pie Chart</div>
<div class="panel-body">
<canvas id="pie"
class="chart chart-pie chart-xs"
chart-data="data"
chart-labels="labels"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Pie Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr>
<td ng-repeat="set in data track by $index">{{data[$index]}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</div>
</section>
</div>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
<script>
(function () {
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.config(function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
responsive: true
});
// Configure all doughnut charts
ChartJsProvider.setOptions('Doughnut', {
animateScale: true
});
});
app.controller('MenuCtrl', function ($scope) {
$scope.isCollapsed = true;
$scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
});
var secondTabSharedLabels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
var secondTabSharedData = [350, 450, 100];
app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$scope.labels = secondTabSharedLabels;
$scope.data = [0, 0, 0];
$timeout(function () {
$scope.data = secondTabSharedData;
}, 500);
}]);
app.controller('PieCtrl', function ($scope) {
$scope.labels = secondTabSharedLabels;
$scope.data = secondTabSharedData;
});
})();
</script>
</body>
</html>
Polar, Dynamic, and Reactive Chart Examples
Source Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS: Charts: Polar, Dynamic, and Reactive Chats</title>
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
<link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
<link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">
<div class="container">
<section id="directives">
<div class="col-lg-6 col-sm-12">
<tabset>
<tab heading="Polar Chart" class="polarChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
<div class="panel panel-default">
<div class="panel-heading">Polar Area Chart</div>
<div class="panel-body">
<canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Pie Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr>
<td ng-repeat="set in data track by $index">{{data[$index]}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab heading="Dynamic Chart" class="dynamicChart">
<div class="settings">
<div class="row">
<div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="DynamicCtrl">
<button type="button" class="btn btn-primary pull-right" ng-click="toggle()">
<b>Toggle</b>
<img height="28px" width="28px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/View-refresh-2.svg/48px-View-refresh-2.svg.png">
</button>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Chart</div>
<div class="panel-body">
<canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
chart-labels="labels" chart-legend="true"></canvas>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Pie Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr>
<td ng-repeat="set in data track by $index">{{data[$index]}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
<tab heading="Reactive Chart" class="reactiveChart">
<div class="settings">
<div class="row" ng-controller="ReactiveCtrl">
<div class="col-lg-6 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Reactive Chart</div>
<div class="panel-body">
<canvas id="tables" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-colours="colours"></canvas>
<!-- <button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button> -->
</div>
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">Chart Data</div>
<div class="panel-body">
<table class="table table-responsive table-condensed table-striped">
<tr>
<th ng-repeat="label in labels">{{label}}</th>
</tr>
<tr ng-repeat="dataSet in data">
<td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</tab>
</tabset>
</div>
</div>
</section>
</div>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
<script>
(function () {
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.config(function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
responsive: true
});
// Configure all doughnut charts
ChartJsProvider.setOptions('Doughnut', {
animateScale: true
});
});
app.controller('MenuCtrl', function ($scope) {
$scope.isCollapsed = true;
$scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
});
var thirdTabSharedLabels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
var thirdTabSharedData = [350, 450, 90, 140, 120];
app.controller('PolarAreaCtrl', function ($scope) {
$scope.labels = thirdTabSharedLabels;
$scope.data = thirdTabSharedData;
});
app.controller('DynamicCtrl', function ($scope) {
$scope.labels = thirdTabSharedLabels;
$scope.data = thirdTabSharedData;
$scope.type = 'PolarArea';
$scope.toggle = function () {
$scope.type = $scope.type === 'PolarArea' ? 'Pie' : 'PolarArea';
};
});
app.controller('ReactiveCtrl', function ($scope, $interval) {
$scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
$scope.data = [
[46, 95, 18, 28, 65, 55, 14],
[82, 84, 14, 91, 68, 72, 19]
];
$scope.colours = [
{ // Red
fillColor: 'rgba(168,0,0,0.2)',
strokeColor: 'rgba(96,0,0,1)',
pointColor: 'rgba(96,0,0,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(96,0,0,0.8)'
},
{ // dark grey
fillColor: 'rgba(77,83,96,0.2)',
strokeColor: 'rgba(77,83,96,1)',
pointColor: 'rgba(77,83,96,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
}
];
$scope.randomize = function () {
$scope.data = $scope.data.map(function (data) {
return data.map(function (y) {
y += Math.random() * 9 - 3;
return parseInt(y < 0 ? 0 : (y > 90) ? 90 : y);
});
});
};
$interval(function(){ $scope.randomize(); }, 1500);
});
})();
</script>
</body>
</html>
Credits
Angular-Chart.js is a nice chart library built by Jerome Toufee-Blin, under BSD License, using AngularJS and Chart.js
© 2015 – 2017, Alejandro G. Carlstein Ramos Mejia. All rights reserved.
