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); }, };