Cacher is the code snippet organizer for pro developers

function costUtilizationPercentageChart(divId, dataset, configValues) {

    try {
        config = jQuery.parseJSON(configValues);
    } catch (err) {
        config = configValues;
    }

    var DC = {
        canvasWidth : 330,
        canvasHeight : 200,
        //
        marginLeft : 0,
        marginRight : 0,
        marginTop : 0,
        marginBottom : 0,
        //
        viewBoxLeft : 0,
        viewBoxTop : 0,
        viewBoxWidth : 330,
        viewBoxHeight : 200,
        //
        legendOffsetX : 10,
        legendOffsetY : 0,
        //
        innerArcRadius : 60,
        outerArcRadius : 90,
        //
        innerBorderRadius : 90,
        outerBorderRadius : 92,
        //
        innercircleColor : "#8b8b8b",
        color : ["#008ED4","#F7941E" ,"#7F3F98", "#009E52","#BE1E2D"],
        text : ["Management","Surgical","Facility","Ancillary","Pharmacy"]
    };
    $.extend(DC, config);

    //Define the size and radius of the chart
    var width = DC.canvasWidth, height = DC.canvasHeight,
        radius = Math.min(DC.canvasWidth, DC.canvasHeight) / 2;
    var colorArray=[];
    var textArray=[];
    var dataArray=[];
    // Use D3's default colors.
    // var color = d3.scale.category20();
    $.each(dataset, function( index, value ) {
  	  if(value > 0){
  		  colorArray.push(DC.color[index]);
  		  textArray.push(DC.text[index]);
  		  dataArray.push(dataset[index]);
  	  }
    });

    var pie = d3.layout.pie().sort(null);

    /**
     * define the size of our arcs. The outer radius determines the overall chart size from the center to the outer edge
     * while the inner radius will define the size of the inner circle.
     */
    var arc = d3.svg.arc().innerRadius(DC.innerArcRadius).outerRadius(DC.outerArcRadius);
    var arcOuter = d3.svg.arc().innerRadius(DC.innerBorderRadius).outerRadius(DC.outerBorderRadius);
 
    var svg = d3.select(divId).append("svg");

    var costChartGroup = svg.append("g");
    var costChart= costChartGroup.append("g");
    var costChartOuter= costChartGroup.append("g");
    
    var path = costChart.selectAll("path").data(pie(dataArray)).enter().append("path").attr("class","costUtilization").attr("class", "arc").attr("fill", function(d, i) {
        return colorArray[i];
    }).attr("id",function(d, i) {
        return divId + "-" + i + "-" + dataArray[i];
    }).attr("d", arc);
    
    var pathOuter = costChartOuter.selectAll("g.outer-arc").data(pie(dataArray)).enter().append("g").attr("class","costUtilizationOuter").attr("class", "outer-arc").attr("fill",'orange' ).attr("d", arcOuter);
    pathOuter.append("path")
    .attr("fill", 'white')
    .attr("d", arcOuter).style('stroke', 'white')
    .style('stroke-width', 0);
    // Inner White Circle - for the spaces between the arcs
    // svg.append("circle").attr("fill", "#F1F2F2").attr("cx", 0).attr("cy", 0).attr("r",60);
    costChart.append("circle").attr("fill", DC.innercircleColor).attr("cx", 0).attr("cy", 0).attr("r", DC.innerArcRadius-1);
    // $('.arc').mouseover(function() {
    costChart.append("text").attr("dy", "0em").style("text-anchor", "middle").style("fill", "#F1F2F2").attr("id", "text-"+divId.slice(-1)).attr("class", "insideCostUt").text(function(d) {
        return dataArray[0]+'%';
    });

    costChart.append("text").attr("dy", "1.5em").style("text-anchor", "middle").style("fill", "#F1F2F2").attr("id","content-"+divId.slice(-1)).attr("class", "dataCostUt").text(function(d) {
        return 'Utilization';
    });  
    //hide costUtilization text for the first time chart is loaded
    $(".insideCostUt").hide();
    $(".dataCostUt").hide();

    //Legend 
    
    var groupLegend = svg.append("g").attr("class", "legend");
    groupLegend.selectAll("rect")
    // adding bullets to the svg.
    .data(dataArray).enter().append("rect")
    .attr({
        x: 0,
        y: function(d, i){return i*35;},
        width: 46,
        height: 18,
        rx: 8,
        ry: 10,
        fill: function(d, i){return colorArray[i];}
    });
    
    groupLegend.selectAll("text").data(dataArray).enter().append("text")
    .text(function (d,i) { return (dataArray[i]+"%"); })
    .attr({
        "text-anchor": "middle",
        x: 24,
        y: function (d, i) { return (13 + 35*i); },
        width: 6,
        height: 12,
        "font-size": "11",
        fill: "#F1F2F2"
    });
    
    groupLegend.selectAll("text1").data(dataArray).enter().append("text")
    .text(function (d,i) { return (textArray[i]); })
    .attr({
        "text-anchor": "start",
        x: 48,
        y: function (d, i) { return (13 + 35*i); },
        width: 100,
        height: 30,
        "font-size": "12",
        fill: "black"
    });

    // BEGIN Translating groupings to the relative positions.
    costChartGroup.attr("transform", "translate(" + radius + "," + radius + ")");

    var dimsLegend = $($(groupLegend)[0])[0].getBBox();
    var offsetX = radius*2 + DC.legendOffsetX;
    var offsetY = (radius*2 - dimsLegend.height)/2 + DC.legendOffsetY;
    groupLegend.attr("transform", "translate(" + offsetX + "," + offsetY + ")");

    var dims = $($(svg)[0])[0].getBBox();
    svg.attr("x", DC.viewBoxLeft)
       .attr("y", DC.viewBoxTop)
       .attr("width", Math.max(dims.width,DC.viewBoxWidth)+DC.marginLeft+DC.marginRight)
       .attr("height", Math.max(dims.height,DC.viewBoxHeight)+DC.marginTop+DC.marginBottom);
    // END Translating groupings to the relative positions.

    $(".arc").hover(function() {
    	var percentageArray = '';
    	var idval = $(this).attr("id");
    	typeof idval !== "undefined" ? percentageArray = $(this).attr("id").split('-') : percentageArray = '';	
        var generateId=percentageArray[0].slice(-1);
        var splitTxt= $("#text-"+generateId).text().split('%');
        var text=$("#text-"+generateId).text().replace(splitTxt[0],percentageArray[2]);
        $("#text-"+generateId).text(text);
        $("#text-"+generateId).show();
        $("#content-"+generateId).show();
    });
    
    $('.arc').mouseleave(function() {
        $(".insideCostUt").hide();
        $(".dataCostUt").hide();
    });
};