Easy Pie Chart - PBR

by BenjaminRay

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/rendro/easy-pie-chart/master/dist/jquery.easypiechart.min.js"></script>
    <div class="row">
        <div class="charts">
            <div class="col-lg-3"><i class="icon-circle-blank success"></i>
                </span>greater than or equal to 75%</div>
            <div class="col-lg-4"><i class="icon-circle-blank warning"></i> greater than or equal to 50% and less than 75%</div>
            <div class="col-lg-2"><i class="icon-circle-blank danger"></i> less than 50%</div>
            <div class="col-lg-3"><i class="icon-circle-blank default"></i> no test tasken</div>
        </div>
    </div>
    <div class="row">
       
        <br><br><br><br>

        <p>
        </p>
        <div class="charts">
            <div class="col-lg-2">
                <div class="donut 6" data-percent="100"><span>6</span>
                </div>
            </div>
            <div class="col-lg-2">
                <div class=" donut 7" data-percent="90"><span>7</span>
                </div>
            </div>
            <div class="col-lg-2">
                <div class=" donut 8" data-percent="75"><span>8</span>
                </div>
            </div>
            <div class="col-lg-2">
                <div class=" donut a1" data-percent="25"><span>A1</span>
                </div>
            </div>
            <div class="col-lg-2">
                <div class=" donut-grey g" data-percent="0"><span class="grey">G</span>
                </div>
            </div>
            <div class="col-lg-2">
                <div class=" donut-grey a2" data-percent="0"><span class="grey">A2</span>
                </div>
            </div>
        </div>
    </div>
    
</div>

CSS

.charts {
    padding-left: 30px;
}
h3, p {
    padding-left: 20px;
}
.grey {
    color: silver;
}

.success {
    color: #62ae41;
}
.warning {
    color: #fcb415;
}
.danger {
    color: #ba2025;
}
.default {
    color: silver;
}
.top {
    padding: 10px;
}

JavaScript

$(function () {

    $('.6').easyPieChart({
        barColor: '#62ae41',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });


    $('.7').easyPieChart({
        barColor: '#62ae41',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });

    $('.8').easyPieChart({
        barColor: '#fcb415',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });

    $('.a1').easyPieChart({
        barColor: '#ba2025',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });

    $('.g').easyPieChart({
        barColor: '#62ae41',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });

    $('.a2').easyPieChart({
        barColor: '#62ae41',
        scaleColor: false,
        lineWidth: 8,
        trackWidth: 8,
        animate: false,
        lineCap: 'square',
        size: 110
    });



    $('.donut').css('width', '108px');
    $('.donut').css('height', '108px');
    $('.donut').css('line-height', '108px');

    $('.donut-grey').css('width', '108px');
    $('.donut-grey').css('height', '108px');
    $('.donut-grey').css('line-height', '108px');




});