Skip to content

Instantly share code, notes, and snippets.

@infracritical

infracritical/index.pug

Created October 17, 2019 02:38
Show Gist options
  • Save infracritical/dba63e73abffc184779b3c2a4c13d5fb to your computer and use it in GitHub Desktop.
Save infracritical/dba63e73abffc184779b3c2a4c13d5fb to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Donut Chart Widget
Raw
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"
)
Raw
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.

Raw
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();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment