gerd
11/8/2016 - 2:06 PM

D3 chart

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

}