Morris.js Donut Chart Test
HTML
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div class="donut"></div>
<div...
CSS
.donut {
width: 500px;
height: 50px;
border: 1px solid black;
}
JavaScript
$('.donut').each(function(index, elem) {
var data = [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
];
Morris.Donut({
element: $(elem),
data: data
});
});