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