Peity Charts

Peity is a jQuery plugin that converts an element's content into a svg mini charts and is compatible with any browser that supports svg.

Page Demo Plugin Website

Pie Chart

<div class="peity-pie">10</div>
<div class="peity-pie">6,4</div>
<div class="peity-pie">3,2,5</div>
<div class="peity-pie">2,2,2,2,2</div>
if($('.peity-pie')[0]) {
    $('.peity-pie').each(function() {
        $(this).peity('pie', {
            fill: ['#fff', 'rgba(255,255,255,0.6)', 'rgba(255,255,255,0.2)'],
            height: 50,
            width: 50
        });
    });
}

Donut Chart

<div class="peity-donut">10</div>
<div class="peity-donut">6,4</div>
<div class="peity-donut">3,2,5</div>
<div class="peity-donut">2,2,2,2,2</div>
$('.peity-donut').each(function() {
    $(this).peity('donut', {
        fill: ['#fff', 'rgba(255,255,255,0.6)', 'rgba(255,255,255,0.2)'],
        height: 50,
        width: 50
    });
});

Line Chart

<div class="peity-line" data-width="250">4,6,7,7,4,3,2,1,4,4,5,7,1,9,5,3,6,3,1,0,8,4,3,5,1,5,7,4,4,4,1,2,4,7,1,9,5,3,6,3,1,0,8,4,3,5,9,9,9,9,9,4,1,1,1,4,2,4,3,7,6,8,9,6,4,6,4,3,6,3,7,2,3</div>
if($('.peity-line')[0]) {
    $('.peity-line').each(function() {
        var peityWidth = ($(this).attr('data-width')) ? $(this).attr('data-width') : 65;

        $(this).peity('line', {
            height: 50,
            fill: 'rgba(255,255,255,0.8)',
            stroke: 'rgba(255,255,255,0)',
            width: peityWidth,
            padding: 0.2
        });
    });
}

Bar Chart

<div class="peity-bar" data-width="250">6,9,5,6,3,7,5,4,6,5,6,4,2,5,8,2,6,9,5,7,2,5,2,8,6,7,6,5,3,1,9,3,5,8,2,4</div>
if($('.peity-bar')[0]) {
    $('.peity-bar').each(function() {
        var peityWidth = ($(this).attr('data-width')) ? $(this).attr('data-width') : 65;

        $(this).peity('bar', {
            height: 36,
            fill: ['rgba(255,255,255,0.85)'],
            width: peityWidth,
            padding: 0.2
        });
    });
}
Files required:
Type Files
Library /resources/vendors/peity/jquery.peity.min.js