Bootstrap Snippet Morris Chart in Bootstrap Modal using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
.mt-100{
    margin-top:100px;
}
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(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);
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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