<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>
