"statistics"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/luclucena/pen/jbzeZm?depth=everything&order=popularity&page=21&q=services&show_forks=false" /> <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <style class="cp-pen-styles">.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; } svg { width: 100%; }</style></head><body> <html> <head> <link rel="stylesheet" href="https://www.cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <meta charset=utf-8 /> <title>Morris.js Responsive Charts Example + Bootstrap</title> </head> <body> <section class="container-fluid"> <div class="row"> <div class="col-md-4"> <div id="bar-chart"></div> </div> <div class="col-md-8"> <div id="line-chart"></div> </div> <div class="col-md-8"> <div id="area-chart"></div> </div> <div class="col-md-4"> <div id="donut-chart"></div> </div> <div class="col-md-8"> <div id="pie-chart"></div> </div> </div> </section> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >$(document).ready(function() { barChart(); lineChart(); areaChart(); donutChart(); $(window).resize(function() { window.barChart.redraw(); window.lineChart.redraw(); window.areaChart.redraw(); window.donutChart.redraw(); }); }); function barChart() { window.barChart = Morris.Bar({ element: 'bar-chart', 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'], lineColors: ['#1e88e5','#ff3321'], lineWidth: '3px', resize: true, redraw: true }); } function lineChart() { window.lineChart = Morris.Line({ element: 'line-chart', 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'], lineColors: ['#1e88e5','#ff3321'], lineWidth: '3px', resize: true, redraw: true }); } function areaChart() { window.areaChart = Morris.Area({ element: 'area-chart', 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'], lineColors: ['#1e88e5','#ff3321'], lineWidth: '3px', resize: true, redraw: true }); } function donutChart() { window.donutChart = Morris.Donut({ element: 'donut-chart', data: [ {label: "Download Sales", value: 50}, {label: "In-Store Sales", value: 25}, {label: "Mail-Order Sales", value: 5}, {label: "Uploaded Sales", value: 10}, {label: "Video Sales", value: 10} ], resize: true, redraw: true }); } function pieChart() { var paper = Raphael("pie-chart"); paper.piechart( 100, // pie center x coordinate 100, // pie center y coordinate 90, // pie radius [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values { legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"] } ); } //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: