"Morris Chart in Bootstrap Modal"
Bootstrap 3.3.0 Snippet by chephz

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-push-4 mt-100"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".charts-modal">Morris Chart in Bootstrap Modal</button> </div> </div> </div> <div class="modal fade charts-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Morris Chart in Bootstrap Modal</h4> </div> <div class="js-loading text-center"> <h3>Loading...</h3> </div> <div id="area-example"></div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div>
.mt-100{ margin-top:100px; }
$(window).load(function(){ $('.charts-modal').on('show.bs.modal', function (event) { setTimeout(function(){ Morris.Area({ element: 'area-example', data: [ { y: '2006', a: 100, b: 90 }, { y: '2007', a: 75, b: 65 }, { y: '2008', a: 50, b: 40 }, { y: '2009', a: 75, b: 65 }, { y: '2010', a: 50, b: 40 }, { y: '2011', a: 75, b: 65 }, { y: '2012', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'] }); // When you open modal several times Morris charts over loading. So this is for destory to over loades Morris charts. // If you have better way please share it. if($('#area-example').find('svg').length > 1){ // Morris Charts creates svg by append, you need to remove first SVG $('#area-example svg:first').remove(); // Also Morris Charts created for hover div by prepend, you need to remove last DIV $(".morris-hover:last").remove(); } // Smooth Loading $('.js-loading').addClass('hidden'); },1000); }); });

Related: See More


Questions / Comments: