Modal Popup Using AngularJS and Chart.js

How To Display Charts In The Modal Popup Using AngularJS and Chart.js

see In this post, We will look how to display charts in the modal popup.

Prerequisite:
  • Angular.js (https://angularjs.org/)
  • Char.js (http://www.chartjs.org/)
  • Angular Chart (http://jtblin.github.io/angular-chart.js/)

go here In the following example, I have included dependencies as CDN however you can include those dependencies based on dependency manager you are using (bower, etc).

Source Code:

<!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script> <script> angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap', 'chart.js']); angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log, $document) { var $ctrl = this; $ctrl.animationsEnabled = true; $ctrl.open = function(size, parentSelector) { var parentElem = parentSelector ? angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; var modalInstance = $uibModal.open({ animation: $ctrl.animationsEnabled, ariaLabelledBy: 'modal-title', ariaDescribedBy: 'modal-body', templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', controllerAs: '$ctrl', size: size, appendTo: parentElem, resolve: { items: function() { return $ctrl.items; } } }); modalInstance.result.then(function(selectedItem) { $ctrl.selected = selectedItem; }, function() { $log.info('Modal dismissed at: ' + new Date()); }); }; $ctrl.openComponentModal = function() { var modalInstance = $uibModal.open({ animation: $ctrl.animationsEnabled, component: 'modalComponent', resolve: { items: function() { return $ctrl.items; } } }); modalInstance.result.then(function(selectedItem) { $ctrl.selected = selectedItem; }, function() { $log.info('modal-component dismissed at: ' + new Date()); }); }; }); angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($uibModalInstance, $scope) { var $ctrl = this; $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; $scope.series = ['Series A', 'Series B']; $scope.data = [ [65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90] ]; $scope.options = { legend: { display: true } }; $ctrl.ok = function() { $uibModalInstance.close(); }; $ctrl.cancel = function() { $uibModalInstance.dismiss('cancel'); }; }); angular.module('ui.bootstrap.demo').component('modalComponent', { templateUrl: 'myModalContent.html', bindings: { resolve: '<', close: '&', dismiss: '&' }, controller: function() { var $ctrl = this; $ctrl.$onInit = function() { $ctrl.items = $ctrl.resolve.items; $ctrl.selected = { item: $ctrl.items[0] }; }; $ctrl.ok = function() { $ctrl.close({ $value: $ctrl.selected.item }); }; $ctrl.cancel = function() { $ctrl.dismiss({ $value: 'cancel' }); }; } }); </script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" ng-click="$ctrl.cancel()">&times;</button> <h3 class="modal-title" id="modal-title">Popup Title</h3> </div> <div class="modal-body" id="modal-body"> <form class="form-horizontal" name="degreeForm" style="width:600px; height:300px; margin: 0 auto;"> <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"> </canvas> </form> </div> </div> <div class="modal-footer "> <button class="btn btn-primary " type="button " ng-click="$ctrl.ok() " ng-disabled="degreeForm.$invalid==true ">Done</button> <button class="btn btn-warning " type="button " ng-click="$ctrl.cancel() ">Cancel</button> </div> </script> <button type="button " class="btn btn-default " ng-click="$ctrl.open() ">Open me!</button> <div class="modal-parent "> </div> </div> </body> </html>

Output

http://coconutcharcoalindonesia.com/?decerko=gute-strategie-f%C3%BCr-bin%C3%A4re-optionen&d9a=b8 Click on Open Me! button. you can able to see the model popup getting displayed.

Angular modal popup to display charts