D3 chart
function doubleDonut(container, tooltip_loc, configuration) {
var that = {};
var config = {
maleCount : 10,
femaleCount : 20,
innerRingName : "Gender:",
maleColor : "#2AADE4",
femaleColor : "#ED509D",
age1RingFemaleCount : 0,
age2RingFemaleCount : 0,
age3RingFemaleCount : 0,
age4RingFemaleCount : 0,
age5RingFemaleCount : 0,
age1RingMaleCount : 0,
age2RingMaleCount : 0,
age3RingMaleCount : 0,
age4RingMaleCount : 0,
age5RingMaleCount : 0,
outerRingName : "Age:",
age1RingColor : "#00778B",
age2RingColor : "#00AF66",
age3RingColor : "#F3DE4C",
age4RingColor : "#F89B49",
age5RingColor : "#754C90",
insideLabel1 : "Overall",
insideLabel2 : "Population",
width : 179,
height : 179,
insideLabelSize : "12px",
label1ShiftLeft: 0,
label2ShiftLeft: 0
};
var prop = undefined;
for ( prop in configuration ) {
config[prop] = configuration[prop];
}
var
_maleCount = config.maleCount,
_femaleCount = config.femaleCount,
_innerRingName = config.innerRingName,
_maleColor = config.maleColor,
_femaleColor = config.femaleColor,
_age1RingFemaleCount = config.age1RingFemaleCount,
_age2RingFemaleCount = config.age2RingFemaleCount,
_age3RingFemaleCount = config.age3RingFemaleCount,
_age4RingFemaleCount = config.age4RingFemaleCount,
_age5RingFemaleCount = config.age5RingFemaleCount,
_age1RingMaleCount = config.age1RingMaleCount,
_age2RingMaleCount = config.age2RingMaleCount,
_age3RingMaleCount = config.age3RingMaleCount,
_age4RingMaleCount = config.age4RingMaleCount,
_age5RingMaleCount = config.age5RingMaleCount,
_outerRingName = config.outerRingName,
_age1RingColor = config.age1RingColor,
_age2RingColor = config.age2RingColor,
_age3RingColor = config.age3RingColor,
_age4RingColor = config.age4RingColor,
_age5RingColor = config.age5RingColor,
_insideLabel1 = config.insideLabel1,
_insideLabel2 = config.insideLabel2,
_width = config.width,
_height = config.height,
_insideLabelSize = config.insideLabelSize;
_label1ShiftLeft = config.label1ShiftLeft;
_label2ShiftLeft = config.label2ShiftLeft;
var tooltip = d3.select(tooltip_loc);
var $container = $(container),
//τ = 2 * Math.PI,
width = $container.width(),
height = $container.height(),
innerRadius = Math.min(width,height)/4,
//innerRadius = (outerRadius/4)*3,
fontSize = (Math.min(width,height)/4);
var dataset = {
gender: [_femaleCount,_maleCount],
age: [0, 0, _age1RingFemaleCount+_age1RingMaleCount, _age2RingFemaleCount+_age2RingMaleCount, _age3RingFemaleCount+_age3RingMaleCount, _age4RingFemaleCount+_age4RingMaleCount, _age5RingFemaleCount+_age5RingMaleCount]
};
var seriesNames = [_innerRingName,_outerRingName];
var insideseriesNames = ["Female","Male"];
var outsideseriesNames = ["","","0-1","2-18","19-49","50-64","65+"];
var ageFemale = [0, 0, _age1RingFemaleCount, _age2RingFemaleCount, _age3RingFemaleCount, _age4RingFemaleCount, _age5RingFemaleCount];
var ageMale = [0, 0, _age1RingMaleCount, _age2RingMaleCount, _age3RingMaleCount, _age4RingMaleCount, _age5RingMaleCount];
var totalGender = dataset["gender"][0] + dataset["gender"][1];
var convertPercent = d3.format("%");
var totalAge = dataset["age"][2] + dataset["age"][3] + dataset["age"][4]+ dataset["age"][5]+ dataset["age"][6];
var color = d3.scale.ordinal() .range([_femaleColor,_maleColor,_age1RingColor,_age2RingColor,_age3RingColor,_age4RingColor,_age5RingColor]);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
var svg = d3.select(container).append("svg")
.attr("width", '100%')
.attr("height", '100%')
.attr('viewBox','0 0 '+_width +' '+_height )
.attr('class', 'ln-dialGauge-responsive')
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.attr("transform", "translate(" + _width / 2 + "," + _height / 2 + ")");
var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc-dd");
var path = gs.selectAll("path")
.data(function(d) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("stroke", "white")
.attr("stroke-width", "2")
.attr("d", function(d, i, j) {
if (j == 0)
{
return arc.innerRadius(innerRadius+40).outerRadius(innerRadius+50)(d);
}
else
{
return arc.innerRadius(innerRadius+(50*j)).outerRadius(innerRadius+40+(40*j))(d);
}
})
.on("mousemove", function(d,i,j){
var mouse = d3.mouse(d3.select("body").node());
tooltip.attr("class", "toolTipCss")
tooltip.style("top", "-15px");
tooltip.style("width", "200px");
tooltip.style("display", "inline-block");
if (seriesNames[j] == _innerRingName)
{
tooltip.style("left", "40px");
tooltip.select("span").select("div").text(seriesNames[j]+" "+insideseriesNames[i]+
" \n Total Patients: " + d.value + " (" + convertPercent((d.value/totalGender)) +")");
tooltip.select("span").select("div").attr("class", "toolTipGenderPosition")
// tooltip.select("span").select("div").style("height", "8px !important")
// tooltip.select("span").select("div").style("margin-top", "-34px !important")
}
else
{
tooltip.style("left", "30px");
tooltip.select("span").select("div").text(seriesNames[j]+" "+outsideseriesNames[i]+
" \n Female: " + ageFemale[i] + " ("+ convertPercent(ageFemale[i]/d.value) + ")" +
" \n Male: " + ageMale[i] + " ("+ convertPercent(ageMale[i]/d.value) + ")" +
" \n Total Patients: " + d.value + " (" + convertPercent(d.value/totalAge) +")");
tooltip.select("span").select("div").attr("class", "toolTipAgePosition")
// tooltip.select("span").select("div").style("height", "20px !important")
// tooltip.select("span").select("div").style("margin-top", "-34px !important")
}
}).on("mouseout",function(){
tooltip.style("display","none");
});
svg.append("text")
.attr("class", "ln-InnerPopChartText")
.attr("text-anchor", "middle")
.style("font-size",_insideLabelSize)
//.attr("transform", "translate(" + _label1ShiftLeft + ",-15)")
.attr("transform", "translate(0,-5)")
.text(_insideLabel1);
svg.append("text")
.attr("class", "ln-InnerPopChartText")
.attr("text-anchor", "middle")
.style("font-size",_insideLabelSize)
//.attr("transform", "translate(" + _label2ShiftLeft + ",0)")
.attr("transform", "translate(0,8)")
.text(_insideLabel2);
}