jQuery Donut Chart Widget

index.pug

// Specification
//
// id: each chart requires its own unique ID
// chart-type: Just set to 'donut'
// data-chart-max: The number of items in the set being charted
// data-chart-segments: { index : [starting point of segment, # of units in segment, color]}
// data-chart-text: The text to appear within the donut hole
// data-chart-caption: the text to appear beneath the chart
// data-chart-initial-rotate: The initial angle from which the donut populates the chart

div.huge-chartbox
  div(
  id="failureChart1",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","30","#19C5F5"],  "1":["30","70","#ecebeb"] }',
  data-chart-text="30%", 
  data-chart-caption="Failure Rate",
  data-chart-initial-rotate="180"
  )
  
  div(
  id="thingsChart1", 
  chart-type="donut", 
  data-chart-max="2000", 
  data-chart-segments='{  "0":["0","1400","#F18605"],  "1":["1400","600", "#ecebeb"]  }', 
  data-chart-text="1400", 
  data-chart-caption="Things to do"
  )
  
  div(
  id="chart2", 
  chart-type="donut", 
  data-chart-max="200", 
  data-chart-segments='{  "0":["0","140","#55DB2E"],  "1":["140","60", "#19A7F5"]  }'
  )
  
  div(
  id="chart3", 
  chart-type="donut", 
  data-chart-max="1000", 
  data-chart-segments='{  "0":["0","50","#FDCA00"],  "1":["50","450","#19A7F5"],  "2":["500","500","#8100C8"]  }',
  data-chart-initial-rotate="90", 
  data-chart-caption="3 Segments, 90 degree rotation",
  data-chart-text="90°")
  
  div(
  id="failureChart3",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","50","#19A7F5"], "1":["50","50","#55DB2E"] }',
  data-chart-text="50%", 
  data-chart-caption="Failure Rate"
  )
  
br
div.large-chartbox(style="margin-top: 100px;")
  div(
  id="failureChart",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","30","#19A7F5"],  "1":["30","70","#ecebeb"] }',
  data-chart-text="30%", 
  data-chart-caption="Failure Rate",
  data-chart-initial-rotate="180"
  )
  
  div(
  id="thingsChart", 
  chart-type="donut", 
  data-chart-max="2000", 
  data-chart-segments='{  "0":["0","1400","#F16805"],  "1":["1400","600", "#ecebeb"]  }', 
  data-chart-text="1400", 
  data-chart-caption="Things to do"
  )
  
  div(
  id="chart2", 
  chart-type="donut", 
  data-chart-max="200", 
  data-chart-segments='{  "0":["0","140","#55DB2E"],  "1":["140","60", "#19A7F5"]  }'
  )
  
  div(
  id="chart3", 
  chart-type="donut", 
  data-chart-max="1000", 
  data-chart-segments='{  "0":["0","50","#FDCA00"],  "1":["50","450","#19A7F5"],  "2":["500","500","#8100C8"]  }',
  data-chart-initial-rotate="90", 
  data-chart-caption="3 Segments, 90 degree rotation",
  data-chart-text="90°")
  
  div(
  id="failureChart3",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","50","#19A7F5"], "1":["50","50","#55DB2E"] }',
  data-chart-text="50%", 
  data-chart-caption="Failure Rate"
  )
  
br
div.chartbox(style="margin-top: 100px;")
  div(
  id="failureChart",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","30","#19A7F5"],  "1":["30","70","#ecebeb"] }',
  data-chart-text="30%", 
  data-chart-caption="Failure Rate",
  data-chart-initial-rotate="180"
  )
  
  div(
  id="thingsChart", 
  chart-type="donut", 
  data-chart-max="2000", 
  data-chart-segments='{  "0":["0","1400","#F16805"],  "1":["1400","600", "#ecebeb"]  }', 
  data-chart-text="1400", 
  data-chart-caption="Things to do"
  )
  
  div(
  id="chart2", 
  chart-type="donut", 
  data-chart-max="200", 
  data-chart-segments='{  "0":["0","140","#55DB2E"],  "1":["140","60", "#19A7F5"]  }'
  )
  
  div(
  id="chart3", 
  chart-type="donut", 
  data-chart-max="1000", 
  data-chart-segments='{  "0":["0","50","#FDCA00"],  "1":["50","450","#19A7F5"],  "2":["500","500","#8100C8"]  }',
  data-chart-initial-rotate="90", 
  data-chart-caption="3 Segments, 90 degree rotation",
  data-chart-text="90°")
  
  div(
  id="failureChart3",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","50","#19A7F5"], "1":["50","50","#55DB2E"] }',
  data-chart-text="50%", 
  data-chart-caption="Failure Rate"
  )

br
div.small-chartbox(style="margin-top: 100px;")
  div(
  id="failureChart",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","30","#19A7F5"],  "1":["30","70","#ecebeb"] }',
  data-chart-text="30%", 
  data-chart-caption="Failure Rate",
  data-chart-initial-rotate="180"
  )
  
  div(
  id="thingsChart", 
  chart-type="donut", 
  data-chart-max="2000", 
  data-chart-segments='{  "0":["0","1400","#F16805"],  "1":["1400","600", "#ecebeb"]  }', 
  data-chart-text="1400", 
  data-chart-caption="Things to do"
  )
  
  div(
  id="chart2", 
  chart-type="donut", 
  data-chart-max="200", 
  data-chart-segments='{  "0":["0","140","#55DB2E"],  "1":["140","60", "#19A7F5"]  }'
  )
  
  div(
  id="chart3", 
  chart-type="donut", 
  data-chart-max="1000", 
  data-chart-segments='{  "0":["0","50","#FDCA00"],  "1":["50","450","#19A7F5"],  "2":["500","500","#8100C8"]  }',
  data-chart-initial-rotate="90", 
  data-chart-caption="3 Segments, 90 degree rotation",
  data-chart-text="90°")
  
  div(
  id="failureChart3",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","50","#19A7F5"], "1":["50","50","#55DB2E"] }',
  data-chart-text="50%", 
  data-chart-caption="Failure Rate"
  )
  
br
div.tiny-chartbox(style="margin-top: 100px;")
  div(
  id="failureChart",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","30","#19A7F5"],  "1":["30","70","#ecebeb"] }',
  data-chart-text="30%", 
  data-chart-caption="Failure Rate",
  data-chart-initial-rotate="180"
  )
  
  div(
  id="thingsChart", 
  chart-type="donut", 
  data-chart-max="2000", 
  data-chart-segments='{  "0":["0","1400","#F16805"],  "1":["1400","600", "#ecebeb"]  }', 
  data-chart-text="1400", 
  data-chart-caption="Things to do"
  )
  
  div(
  id="chart2", 
  chart-type="donut", 
  data-chart-max="200", 
  data-chart-segments='{  "0":["0","140","#55DB2E"],  "1":["140","60", "#19A7F5"]  }'
  )
  
  div(
  id="chart3", 
  chart-type="donut", 
  data-chart-max="1000", 
  data-chart-segments='{  "0":["0","50","#FDCA00"],  "1":["50","450","#19A7F5"],  "2":["500","500","#8100C8"]  }',
  data-chart-initial-rotate="90", 
  data-chart-caption="3 Segments, 90 degree rotation",
  data-chart-text="90°")
  
  div(
  id="failureChart3",
  chart-type="donut",
  data-chart-max="100",
  data-chart-segments='{ "0":["0","50","#19A7F5"], "1":["50","50","#55DB2E"] }',
  data-chart-text="50%", 
  data-chart-caption="Failure Rate"
  )

jquery-donut-chart-widget.markdown

jQuery Donut Chart Widget

This is an easily and heavily configurable, JSON-feedable donut chart, designed for quick viewing of dashboard-style data.

A Pen by Drew Worthey on CodePen.

License.

script.js

function createDonutCharts() {
    $("<style type='text/css' id='dynamic' />").appendTo("head");
    $("div[chart-type*=donut]").each(function () {
        var d = $(this);
        var id = $(this).attr('id');
        var max = $(this).data('chart-max');
        if ($(this).data('chart-text')) {
            var text = $(this).data('chart-text');
        } else {
            var text = "";
        }
        if ($(this).data('chart-caption')) {
            var caption = $(this).data('chart-caption');
        } else {
            var caption = "";
        }
        if ($(this).data('chart-initial-rotate')) {
            var rotate = $(this).data('chart-initial-rotate');
        } else {
            var rotate = 0;
        }
        var segments = $(this).data('chart-segments');

        for (var i = 0; i < Object.keys(segments).length; i++) {
            var s = segments[i];
            var start = ((s[0] / max) * 360) + rotate;
            var deg = ((s[1] / max) * 360);
            if (s[1] >= (max / 2)) {
                d.append('<div class="large donut-bite" data-segment-index="' + i + '"> ');
            } else {
                d.append('<div class="donut-bite" data-segment-index="' + i + '"> ');
            }
            var style = $("#dynamic").text() + "#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]{-moz-transform:rotate(" + start + "deg);-ms-transform:rotate(" + start + "deg);-webkit-transform:rotate(" + start + "deg);-o-transform:rotate(" + start + "deg);transform:rotate(" + start + "deg);}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]:BEFORE{-moz-transform:rotate(" + deg + "deg);-ms-transform:rotate(" + deg + "deg);-webkit-transform:rotate(" + deg + "deg);-o-transform:rotate(" + deg + "deg);transform:rotate(" + deg + "deg); background-color: " + s[2] + ";}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"]:BEFORE{ background-color: " + s[2] + ";}#" + id + " .donut-bite[data-segment-index=\"" + i + "\"].large:AFTER{ background-color: " + s[2] + ";}";
            $("#dynamic").text(style);
        }

        d.children().first().before("<div class='donut-hole'><span class='donut-filling'>" + text + "</span></div>");
        d.append("<div class='donut-caption-wrapper'><span class='donut-caption'>" + caption + "</span></div>");
    });
}

$(document).ready(function() {
    createDonutCharts();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

//Donut Chart
.tiny-chartbox {
    .chartbox(60px, .78, 115px)
}

.small-chartbox {
    .chartbox(85px, .78, 115px)
}

.chartbox {
    .chartbox(110px, .78, 115px)
}

.large-chartbox {
    .chartbox(135px, .78, 115px)
}

.huge-chartbox {
    .chartbox(160px, .6, 115px)
}

.giant-chartbox {
    .chartbox(350px, .4, 0)
}

.chartbox(@w, @hw, @m) {
    @chart-width: @w;
    @donut-hole-width: @chart-width*@hw;

    display: -ms-inline-flexbox;
    display: -webkit-inline-flexbox;
    display: inline-flex;
    margin-bottom: (.4 * @chart-width);

    div[chart-type*="donut"] {
        width: @chart-width;
        height: @chart-width;
        display: block;
        position: relative;
        margin-right: @m;
    }

        div[chart-type*="donut"]:last-of-type {
            margin-right: 0;
        }

    div.donut-hole {
        height: @donut-hole-width;
        width: @donut-hole-width;
        background-color: #fff;
        z-index: 20;
        position: absolute;
        top: (1/2) * @chart-width - (1/2) * @donut-hole-width;
        left: (1/2) * @chart-width - (1/2) * @donut-hole-width;
        border-radius: @donut-hole-width;
        line-height: 0.25 * @chart-width;
    }

    span.donut-filling {
        position: absolute;
        display: block;
        vertical-align: middle;
        font-family: "Open Sans";
        font-weight: 300;
        color: #616161;
        font-size: 0.24444 * @chart-width;
        top: 50%;
        margin-top: -(1/2) * (0.25 * @chart-width);
        width: @donut-hole-width;
        height: 0.25 * @chart-width;
        text-align: center;
        cursor: default;
        overflow: none;
    }

    div.donut-caption-wrapper {
        width: @chart-width;
        align-content: center;
        position: relative;
        top: @chart-width + ((200/9/100) * @chart-width);
    }

    span.donut-caption {
        display: block;
        text-align: center;
        font-family: "Open Sans";
        color: #616161;
        font-size: (260/27/100) * @chart-width;
        font-weight: 600;
        cursor: default;
        margin: 0 auto;
    }

    .donut-bite {
        position: absolute;
        width: @chart-width / 2;
        height: @chart-width;
        overflow: hidden;
        top: 0;
        left: (@chart-width + 1)/2;
        -moz-transform-origin: left center;
        -ms-transform-origin: left center;
        -o-transform-origin: left center;
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }

        .donut-bite.large {
            width: @chart-width;
            height: @chart-width;
            left: 0;
            //left: @chart-width / 2;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
            -webkit-transform-origin: center center;
            transform-origin: center center;
        }

        .donut-bite:BEFORE {
            content: "";
            position: absolute;
            width: @chart-width/2;
            height: @chart-width;
            top: 0;
            left: -@chart-width/2;
            border-radius: @chart-width/2 0 0 @chart-width/2;
            -moz-transform-origin: right center;
            -ms-transform-origin: right center;
            -o-transform-origin: right center;
            -webkit-transform-origin: right center;
            transform-origin: right center;
        }

        .donut-bite.large:BEFORE {
            left: 0;
        }

        .donut-bite.large:AFTER {
            content: "";
            position: absolute;
            width: @chart-width / 2;
            height: @chart-width;
            left: @chart-width / 2;
            border-radius: 0 @chart-width/2 @chart-width/2 0;
        }
}