gerd
11/8/2016 - 1:16 PM
horizontalStackedChart.js
// To initialize horizontal stacked chart with parameters chartid and data
var multiStackedCharttooltipId="ln_multi_stacked_graph_tooltip";
function initMultiStackedChart(chartID, xAxisId, dataset) {
var viewBoxWidthAdjust=33;
//This is the view box width and height.
var mainViewboxHeight=0;
var xaxisViewboxHeight=0;
var viewboxWidth=500+viewBoxWidthAdjust;
var xaxisViewboxWidth=517+viewBoxWidthAdjust;
if(screen.width<=1024){//Checking for 1024 resolution
xaxisViewboxWidth=526+viewBoxWidthAdjust;
}else if(screen.width>1440){
xaxisViewboxWidth=514+viewBoxWidthAdjust;
}
var margins = {
top: 20,
right: 20,
bottom: 100,
left: 120
};
var width = 500 - margins.left - margins.right;
var height = 5250 - margins.top - margins.bottom;
var module_fixed = 200;
height = Math.floor((dataset[0].values.length * height) / module_fixed);
//Checking the user agent as IE requires a different view box setting.
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
LN.debug("----Inside IE browser----");
mainViewboxHeight=230;
xaxisViewboxHeight=130;
if(screen.width<=1024){
xaxisViewboxHeight=210;
}
}
else{
LN.debug("----Inside Non IE browser----");
//mainViewboxHeight=850;
//mainViewboxHeight=2320;
mainViewboxHeight=height;
xaxisViewboxHeight=100;
}
var x = d3.scale.ordinal().rangeRoundBands(
[0, width], .1, .1);
var y = d3.scale.linear().rangeRound(
[height, 0], .1);
var series = dataset.map(function(d) {
return d.key;
});
//Assigning the dataset values to variables.
dataset = dataset.map(function(d) {
return d.values.map(function(o, i) {
// Structure it so that your numeric
// axis (the stacked amount) is y
return {
y: o.utilizedPercentage,
x: o.specialty_desc,
z: o.specialty,
w: o.providerCount
};
});
});
var 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,
x0: d.y0,
z: d.z,
w: d.w
};
});
});
var xMax = d3.max(dataset, function(group) {
return d3.max(group, function(d) {
return d.x + d.x0;
});
});
var xScale = d3.scale.linear()
.domain([0, xMax])
.range([0, width]);
var moduleName = dataset[0]
.map(function(d) {
return d.y;
});
var yScale = d3.scale.ordinal()
.domain(moduleName)
.rangeRoundBands([ 0,height]);//inversed the value here to reverse the Y-axis order
/* var svg = d3.select(chartID)
.append('svg')
.attr("width", width + margins.left +
margins.right)
// .attr("height", height + margins.top)
.attr("height", height)
.append('g')
.attr('transform', 'translate(80,' + margins.top + ')');*/
var svg = d3.select(chartID)
// .classed("ln-svg-container", true).append('svg').classed("ln-svg-responsive", true).attr('viewBox','0 0 500 850')
.classed("ln-svg-container", true).append('svg').classed("ln-svg-responsive", true).attr('viewBox','0 0'+' '+viewboxWidth+' '+mainViewboxHeight)
.attr('perserveAspectRatio','xMinYMin slice')
.append('g')
.attr('transform', 'translate(165,' + margins.top + ')');
/* var xaxis_svg = d3.select(xAxisId)
.append('svg')
.attr("width", width + margins.left +
margins.right)
.attr("height", margins.bottom)
.append('g')
.attr('transform', 'translate(80,0)');*/
var xaxis_svg = d3.select(xAxisId)
//.classed("ln-svg-container", true).append('svg').classed("ln-svg-responsive", true).attr('viewBox','0 0'+' '+viewboxWidth+' '+xaxisViewboxHeight)
.classed("ln-svg-container", true).append('svg').classed("ln-svg-responsive", true).attr('viewBox','-4 0'+' '+xaxisViewboxWidth+' '+xaxisViewboxHeight)//517
.attr('perserveAspectRatio','xMinYMin slice')
//.append('g').attr('transform', 'translate(80,0)');
.append('g').attr('transform', 'translate(162,10)');
//This is the X-axis orientation and tick sizing.
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(5)
.tickSize(5)
.tickPadding(15);
/* .tickFormat(function(d) {
return d + "%";
});*/
//This is the Y-axis orientation and tick sizing.
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.tickSize(5);
//Colors for the band.
var colours = d3.scale.ordinal().range(
["rgb(255, 216, 0)","rgb(0, 255, 33)","rgb(255, 0, 0)"]);
var groups = svg.selectAll('g')
.data(dataset)
.enter()
.append('g').attr('class', 'stacked').attr('data-color', function(d, i) {
return colours(i);
})
.style('fill', function(d, i) {
return colours(i);
});
var rects = groups.selectAll('stackedBar')
.data(function(d, i) {
return d;
})
.enter()
.append('rect')
.attr('class', 'stackedBar')
.attr('x', function(d) {
return xScale(d.x0);
})
.attr('y', function(d, i) {
return yScale(d.y);
})
.attr('height', 16)
.attr('width', 0);
rects.transition()
/*.delay(function(d, i) {
return i * 50;
})*/
.attr("x", function(d) {
return xScale(d.x0);
})
.attr("width", function(d) {
return xScale(d.x);
});
//.duration(1000);
//This is for tooltip.
rects.on("mouseover", function(d, i){ mouseOverCallback(d,this); })
.on("mouseleave", function(d) {
removeToolTip(multiStackedCharttooltipId);
})
//Added
x.domain(dataset.map(function(d) {
return d.utilizedPercentage;
}));
y.domain([0, d3.max(dataset, function(d) {
return d.specialty_desc;
})]);
xaxis_svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + 0 + ')')
.call(xAxis)
.append("text")
.attr("y", 10)
.attr("x", 140)
.attr("dy", ".30em");
// .text("Percentage of Providers");
xaxis_svg.selectAll('.axis').append('text').attr('x',128).attr('y',45).text('Percentage of Providers').classed('ln-stackedBarChart-label',true);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.selectAll("text")
.attr("class", "ln-barChart-label-underLine")
.style("text-anchor", "end")
.style("cursor", "pointer")
.attr("dx", ".3em")//Changing this for Label x-axis adjustment
.attr("dy", ".15em")
//.attr("y", "-")
// .attr("opacity", 1)
/* .attr("transform", function(d) {
return "rotate(-40)"
})*/
//.call(wrap, yScale.rangeBand());
.call(wrapText, yScale.rangeBand());
// Draw Y-axis grid lines
svg.selectAll("line.y")
.data(y.ticks(5))
.enter().append("line")
.attr("class", "y")
.attr("x1", 0)
.attr("x2", 450)
.attr("y1", y)
.attr("y2", y)
.style("stroke", "#ccc");
//Positioning the Legends starts
var legendPosition=60;
var textPosition=75;
series.forEach(function (s, i) {
if(i==0){
legendPosition=legendPosition;
textPosition=textPosition;
}
else if(i==1){
legendPosition=175;
textPosition=190;
}
else
{
legendPosition=280;
textPosition=295;
}
xaxis_svg.append('text')
.attr('fill', 'black')
.attr('x',textPosition)
.attr('y',65 )//.attr('style','font-size:0.8em')
.text(s);
xaxis_svg.append('rect')
.attr('fill', colours(i))
.attr('width',10)
.attr('height', 10)
.attr('x',legendPosition)
.attr('y',55 );
$('path').css('height','1px');
});
//Positioning the Legends ends
}
//This method is for hiding the tooltip on mouse out.
function removeToolTip(id){
if (id != null && $('#'+id).length > 0) {
$('#'+id).remove();
}
}
//This method is for displaying the tooltip on mouse hover.
function mouseOverCallback(d,obj){
removeToolTip(multiStackedCharttooltipId);
var providerCount=d.w;
var percentageValue=d.x;
div = d3.select("body").append("div");
div.attr("class", "ln-chart-tooltip")
.attr("id", multiStackedCharttooltipId);
var percetageDisplay=percentageValue.toFixed(2);
//var percetageDisplay=Math.ceil(percentageValue);
var tip='';
tip = div.html([providerCount+' Providers',percetageDisplay+'%'].join(', '));
tip.style("left", (d3.event.pageX+12) + "px")
.style("top", (d3.event.pageY-35) + "px")
.style("border-color", $(obj).parent().attr('data-color'))
.style("opacity", 1)
.style("display","block");
}
function wrapText(text, width) {
text.each(function() {
var text = d3.select(this);
text.text(text.text().substring(0,25));
});
}
//This method is for wrapping the label in the Y-axis.
function wrap(text, width) {
text.each(function() {
var uniqueChar="~~~";
var junkChar="!!!";
var spaceChar=" ";
var find = '/';
var re = new RegExp(find, 'g');
var text = d3.select(this);
var words = text.text().split(junkChar).reverse();
if(text.text().length>14){
var textStr=text.text();
if(textStr.length>30){
textStr=textStr.substring(0,30);//Truncating the label to 30 chars max.
}
var splitWords=textStr.replace(re, spaceChar).replace(spaceChar, uniqueChar).split(uniqueChar);
if(splitWords[1] && splitWords[1].length>16){
splitWords=textStr.replace(re, spaceChar).replace(spaceChar, uniqueChar).replace(spaceChar, uniqueChar).split(uniqueChar);
}
words = splitWords.reverse();
}
var word,
line = [],
lineNumber = 0,
lineHeight = 0.9, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", -4).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(spaceChar));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(spaceChar));
line = [word];
tspan = text.append("tspan").attr("x", -4).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}