gerd
11/8/2016 - 1:52 PM

stackedchart.js

drawStackedChart=function(divId,dataset,colors){
		var dValues = {
			canvasWidth : 650,
			canvasHeight : 100,
			viewBoxHeight:200,
			viewBoxWidth:900,
			enableLinks : 'true', 
			isAbsolute: false,
			isGroupPage:false
	};
	LN.debug(dValues.canvasHeight);
	var margins = {
			top : 12,
			left : 20,
			right : 20,
			bottom : 24
	};
	var margins = {
		    top: 12,
		    left: 80,
		    right: 20,
		    bottom: 24
		},
		legendPanel = {
		    width: 250
		},
		width = 650 - margins.left - margins.right - legendPanel.width,
		    height = 100 - margins.top - margins.bottom,

	series = dataset.map(function (d) {
        return d.condition;
    }),
    dataset = dataset.map(function (d) {
        return d.data.map(function (o, i) {
            // Structure it so that your numeric
            // axis (the stacked amount) is y
            return {
                y: o.count,
                x: o.Issue,
                z: o.condition
            };
        });
    }),
    stack = d3.layout.stack();

stack(dataset);

var dataset = dataset.map(function (group) {
    return group.map(function (d) {
        // Invert the x and y values, and y0 becomes x0
        return {
            x: d.y,
            y: d.x,
            z:d.z,
            x0: d.y0
        };
    });
}),
    svg = d3.select(divId)
     .classed("ln-svg-container", true).append('svg').classed("ln-svg-responsive", true).attr('viewBox','0 0'+' '+dValues.viewBoxWidth+' '+dValues.viewBoxWidth)
	  .attr('perserveAspectRatio','xMinYMin slice')

        .append('g')
        .attr('transform', 'translate(120,60)'),
    xMax = d3.max(dataset, function (group) {
        return d3.max(group, function (d) {
            return d.x + d.x0;
        });
    }),
    xScale = d3.scale.linear()
        .domain([0, xMax])
        .range([0, width]),
    yAxisLabel = dataset[0].map(function (d) {
        return d.y;
    }),
    yScale = d3.scale.ordinal()
        .domain(yAxisLabel)
        .rangeRoundBands([0, height], .1),
    xAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom'),
    yAxis = d3.svg.axis()
        .scale(yScale)
        .orient('left'),
    groups = svg.selectAll('g')
        .data(dataset)
        .enter()
        .append('g')
        .style('fill', function (d, i) {
        return colors[i];
    }),
    rects = groups.selectAll('rect')
        .data(function (d) {
        return d;
    })
        .enter().append("svg:a")
		.attr("xlink:href", function(d) {
		return d.z
		})
        .append('rect')
        .attr('x', function (d) {
        return xScale(d.x0);
    })
        .attr('y', function (d, i) {
		
        return yScale(d.y);
    })
        .attr('height', function (d) {
        return yScale.rangeBand();
    })
        .attr('width', function (d) {
        return xScale(d.x);
    })
        

    svg.append('g')
        .attr('class', 'axis')
        .attr('transform', 'translate(0,' +height+ ')')
        .call(xAxis);

svg.append('g')
    .attr('class', 'yaxis')
    .call(yAxis);

svg.append('rect')
    .attr('fill', 'white')
    .attr('width', 160)
    .attr('height', 30 * dataset.length)
    .attr('x', width + margins.left)
    .attr('y', 0);

series.forEach(function (s, i) {
    svg.append('text')
        .attr('fill', 'black')
        .attr('x', 510)
        .attr('y', i * 24 + 24)
        .text(s);
    svg.append('rect')
        .attr('fill', colors[i])
        .attr('width',30)
        .attr('height', 20)
        .attr('x', width + margins.left + 90)
        .attr('y', i * 24 + 6);
$('path').css('height','1px');
});
		d3.selectAll('.yaxis .tick text').data(dataset).attr("text-decoration", "none")
		.style("cursor", function(d) {
			return "pointer";
		})
	
		.style("fill", function() {
		return "blue";	
		})
		.on("click", function(d,i) {
				document.location.href = d[i].x;
			} 
		
		);

};