Modal Popup Using AngularJS and Chart.js

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

http://www.tentaclefilms.com/?yutie=download-broker-binario&498=6a 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/)

binary option prosignals 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:

asian dating in atlanta <!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://fgsk.de/?kraevid=bin%C3%A4re-optionen-bokay&b01=e7 Click on Open Me! button. you can able to see the model popup getting displayed.

Angular modal popup to display charts