33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
|
var GaugeChart = {
|
||
|
|
init: function(svg, html_tag_attr, min, current, max){
|
||
|
|
console.log(min, current, max);
|
||
|
|
var startAngle = -Math.PI/2,
|
||
|
|
tau = Math.PI/2,
|
||
|
|
C = tau/max;
|
||
|
|
console.log(tau, max, C, (current*C));
|
||
|
|
|
||
|
|
var width = $(html_tag_attr).width(),
|
||
|
|
height = $(html_tag_attr).height(),
|
||
|
|
coeff = height / 2,
|
||
|
|
size = 15,
|
||
|
|
g = svg.append("g").attr("transform", "translate(" + ((width / 2) - size) + "," + (height - height/2) + ")");
|
||
|
|
|
||
|
|
var arc = d3.arc()
|
||
|
|
.innerRadius(height - coeff)
|
||
|
|
.outerRadius(height - coeff - size)
|
||
|
|
.startAngle(startAngle);
|
||
|
|
|
||
|
|
// Add the background arc, from 0 to 100% (tau).
|
||
|
|
var background = g.append("path")
|
||
|
|
.datum({endAngle: tau})
|
||
|
|
.style("fill", "#ddd")
|
||
|
|
.attr("d", arc);
|
||
|
|
|
||
|
|
// Add the foreground arc in orange, currently showing 12.7%.
|
||
|
|
var foreground = g.append("path")
|
||
|
|
.datum({endAngle: (current/max*C)/startAngle })
|
||
|
|
.style("fill", "orange")
|
||
|
|
.attr("d", arc);
|
||
|
|
},
|
||
|
|
};
|