"ist210-movie-dashboard-charts"
Bootstrap 4.0.0 Snippet by needmorecowbell

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <h3>Morris Charts Example</h3> </div> </div><!--/row--> <hr> <div class="row"> <div class="col-md-12"> <div id="area-example" style="height: 300px;"></div> </div> <div class="col-md-12"> <div id="line-example" style="height: 300px;"></div> </div> <div class="col-md-6"> <div id="donut-example" style="height: 250px;"></div> </div> <div class="col-md-6"> <div id="bar-times-rented" style="height: 250px;"></div> </div> <script> $.getScript('http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js',function(){ $.getScript('http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js',function(){ Morris.Area({ element: 'area-example', data: [ { y: '1.1.', a: 100, b: 90 }, { y: '2.1.', a: 75, b: 65 }, { y: '3.1.', a: 50, b: 40 }, { y: '4.1.', a: 75, b: 65 }, { y: '5.1.', a: 50, b: 40 }, { y: '6.1.', a: 75, b: 65 }, { y: '7.1.', a: 100, b: 90 } ], xkey: 'y', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'] }); Morris.Line({ element: 'line-example', data: [ {year: '2010', value: 20}, {year: '2011', value: 10}, {year: '2012', value: 5}, {year: '2013', value: 2}, {year: '2014', value: 20} ], xkey: 'year', ykeys: ['value'], labels: ['Value'] }); Morris.Donut({ element: 'donut-example', data: [ {label: "Android", value: 12}, {label: "iPhone", value: 30}, {label: "Other", value: 20} ] }); Morris.Bar({ element: 'bar-times-rented', data: [ {y: 'Jan 2014', a: 100}, {y: 'Feb 2014', a: 75}, {y: 'Mar 2014', a: 50}, {y: 'Apr 2014', a: 75}, {y: 'May 2014', a: 50}, {y: 'Jun 2014', a: 75} ], xkey: 'y', ykeys: ['a'], labels: ['Visitors', 'Conversions'] }); }); }); </script> </div> </div> </div>
.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0} .morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}
//Morris charts snippet - js

Related: See More


Questions / Comments: