Chart.js Donut Chart Test

by cdeutsch

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.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 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: 50px;
    height: 50px;
    border: 1px solid black;
}

JavaScript

$('.donut').each(function(index, elem) {
    var data = [
        {
            value: 30,
            color:"#F7464A"
        },
        {
            value : 50,
            color : "#E2EAE9"
        },
        {
            value : 100,
            color : "#D4CCC5"
        },
        {
            value : 40,
            color : "#949FB1"
        },
        {
            value : 120,
            color : "#4D5360"
        }
    
    ];
    var options = {
        animation: true
    };

    var ctx = $(elem).append('<canvas width="50" height="50"></canvas>').children()[0].getContext("2d");
    //console.log(ctx);
    new Chart(ctx).Doughnut(data,options);
});