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.