D3.js donut chart
HTML
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="gauge1"></div>
CSS
body {
background: #eeeeee;
}
JavaScript
$(document).ready(function() {
var $this = $("#gauge1");
var w = 350;
var h = 350;
var options = {
minValue: 0, // The gauge minimum value.
maxValue: 100, // The gauge maximum value.
circleThickness: 0.1, // The outer circle thickness as a percentage of it's radius.
circleFillGap: 0.025, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
circleColor: "#f82a68", // The color of the outer circle.
waveHeight: 0.1, // The wave height as a percentage of the radius of the wave circle.
waveCount: 1, // The number of full waves per width of the wave circle.
waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
waveAnimateTime: 2000, // The amount of time in milliseconds for a full wave to enter the wave circle.
waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
waveAnimate: true, // Controls if the wave scrolls or is static.
waveColor: "#2e7d9b", // The color of the fill wave.
waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
textVertPosition: 0.8, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50%
textColor: "#e83471", // The color of the value text when the wave does not overlap it.
waveTextColor: "#47c6b6", // The color of the value text when the wave overlaps it.
displayText: true,
value: 70,
fillshape: "rect"
};
liquidGauge($this, options);
function liquidGauge(el, config) {
var gauge = d3.select(el[0])
.append("svg")
.attr("width", w)
.attr("height", h)
.append("g");
var radius = Math.min(parseInt(w), parseInt(h)) / 2;
var fillPercent = Math.max(config.minValue,...