<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);
});
});
