gerd
11/8/2016 - 2:09 PM
stackedchart.js
/**
* This javascript provides function for drawing pie chart
* @class lexisnexis.component.drawStackedBarChart
*/
jQuery.namespace('lexisnexis.component');
/**
* Method to draw stacked bar chart
* @method lexisnexis.component.drawStackedBarChart
*/
lexisnexis.component.drawStackedBarChart = function(divId, values, dat) {
try {
LN.debug(dat);
data = jQuery.parseJSON(dat);
} catch (err) {
data = dat;
}
try {
configValues = jQuery.parseJSON(values);
} catch (err) {
configValues = values;
}
LN.debug('the dataset is');
LN.debug(dataSet);
var labelNamesArray = [];
if(!configValues.skipClear){
d3.select("svg").remove();
}
var dValues = {
canvasWidth : 800,
canvasHeight : 500,
enableLinks : 'true' /* DE876 - Group Profile should not let you drill down - added */
};
$.extend(true, dValues, configValues);
LN.debug(dValues.canvasHeight);
var margins = {
top : 12,
left : 20,
right : 20,
bottom : 24
};
var width = dValues.canvasWidth;
var height = dValues.canvasHeight - margins.top - margins.bottom;
var barHeight = 15;
var padding = .1;
var nonLinkLabels = [];
var complaintNonLinkLabels = [];
var nonComplaintNonLinkLabels = [];
/* DE876 - Group Profile should not let you drill down starts */
var enableLinks = dValues.enableLinks;
/* DE876 - Group Profile should not let you drill down ends */
dataset = data.map(function(d) {
return d.data.map(function(o, i) {
code = d.name;
return {
y : parseInt(o.value),
x : o.label,
z : o.link,
c : o.color,
p: code
};
});
});
var stack = d3.layout.stack();
stack(dataset);
dataset = dataset.map(function(group) {
return group.map(function(d) {
//adding non link labels for zero values
if(d.y <= 0 && d.p=="Compliant") {
complaintNonLinkLabels.push(d.x);
} else if(d.y <= 0 && d.p=="NonComplaint") {
nonComplaintNonLinkLabels.push(d.x);
}
return {
x : d.y,
y : d.x,
z : d.z,
c : d.c,
p: d.p,
x0 : d.y0
};
});
});
nonLinkLabels = complaintNonLinkLabels.filter( function(n) {
return nonComplaintNonLinkLabels.indexOf(n) != -1;
});
var labels = dataset[0].map(function(d) {
return d.y;
});
LN.debug(labels);
var viewBoxHeight;
var viewPaddingBottom = "padding-bottom:0%";
if (labels.length < 5) {
height = (labels.length * barHeight * 2.5) - margins.top
- margins.bottom;
padding = .3;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','12em');
} else if (labels.length < 8) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .2;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
} else if (labels.length < 10) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .2;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
} else if (labels.length < 12) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .2;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
} else if (labels.length < 14) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
} else if (labels.length < 16) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
}else if (labels.length < 17) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewBoxHeight = (height+100) ;
viewPaddingBottom = "padding-bottom:40%";
$('#ln_measureChart').css('min-height','4em');
} else if (labels.length < 18) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewPaddingBottom = "padding-bottom:40%";
$('#ln_measureChart').css('min-height','4em');
viewBoxHeight = (height+100) ;
}else if (labels.length < 20) {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewBoxHeight = (height+100) ;
$('#ln_measureChart').css('min-height','4em');
viewPaddingBottom = "padding-bottom:40%";
}else {
height = (labels.length * barHeight * 1.5) - margins.top
- margins.bottom;
padding = .1;
viewBoxHeight = (height+200) ;
viewPaddingBottom = "padding-bottom:60%";
}
var svg = d3.select(divId).attr("style",viewPaddingBottom).classed("ln-stackedChart-container", true).append('svg').classed("ln-stackedChart-responsive", true).attr('viewBox',dValues.viewBoxLeft+' '+dValues.viewBoxTop+' '+dValues.viewBoxWidth+' '+viewBoxHeight)
.attr('perserveAspectRatio','xMinYMin meet').append('g').attr(
'transform', 'translate(' + 145 + ',' + 5 + ')');
var xMax = 100;
LN.debug(xMax);
svg.selectAll("text").data(dataset).enter().append('text');
var xScale = d3.scale.linear().domain([ 0, 100 ]).range([ 0, width ]);
for (index = 0; index < dataset.length; index++) {
dataset[index]
.map(function(d) {
var boolVal = false;
var labelObj = {};
if (labelNamesArray.length > 0) {
boolVal = false;
for (i = 0; i < labelNamesArray.length; i++) {
if (labelNamesArray[i].label == d.y) {
labelNamesArray[i].countTotal = labelNamesArray[i].countTotal
+ d.x;
boolVal = true;
}
}
if (!boolVal) {
labelObj.label = d.y;
labelObj.countTotal = d.x;
labelNamesArray.push(labelObj);
}
} else {
labelObj.label = d.y;
labelObj.countTotal = d.x;
labelNamesArray.push(labelObj);
}
});
}
var yScale = d3.scale.ordinal().domain(labels).rangeRoundBands(
[ 0, 1.1 * height ], padding);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(2)
.tickFormat(function(d) {
return d + "%";
});
;
var yAxis = d3.svg.axis().scale(yScale).orient('left');
var groups = svg.selectAll('g').data(dataset).enter().append('g');
/* DE876 - Group Profile should not let you drill down starts */
if(enableLinks == 'true') {
/* DE876 - Group Profile should not let you drill down ends */
groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append("svg:a")
.attr("xlink:href", function(d) {
if (d.p == 'Compliant') {
return LN.getContextPath()+"/"+d.z + "/" + d.y + "/" + "compliant";
} else {
return LN.getContextPath()+"/"+d.z + "/" + d.y + "/" + "noncompliant";
};
})
.append('rect')
.attr(
'x',
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return xScale(d.x0
* (xMax / labelNamesArray[index].countTotal));
}
}
})
.attr('y', function(d, i) {
return (yScale(d.y) + 2);
})
.attr('height', barHeight)
.attr(
'width',
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return xScale(d.x
* (xMax / labelNamesArray[index].countTotal));
}
}
}).style('fill', function(d, i) {
return d.c;
}).text(function(d, i) {
return numeral(String(d.x)).format('(0,0)');
}).attr("xlink:href", function(d) {
return d.z;
}).on('mouseover', function() {
}).on('mouseout', function() {
d3.select('#tooltip').classed('hidden', true);
});
groups.selectAll('BarText')
.data(function(d) {
return d;
})
.enter()
.append("svg:a")
.attr("xlink:href", function(d) {
if (d.p == 'Compliant') {
return LN.getContextPath()+"/"+d.z + "/" + d.y + "/" + "compliant";
} else {
return LN.getContextPath()+"/"+d.z + "/" + d.y + "/" + "noncompliant";
};
})
.append('text')
.attr(
"x",
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
// setting the point x for the text as center of
// the bar width from the point of the bar. so
// that text will be centered.
return ((xScale(d.x0
* (xMax / labelNamesArray[index].countTotal)) + (xScale(d.x
* (xMax / labelNamesArray[index].countTotal))) / 2)-6);
}
}
}).attr('y', function(d, i) {
return yScale(d.y);
}).attr("dy", "13px").text(function(d) {
var index;
if(d.x!=0){
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return numeral(d.x).format('0,0');
}
}
}
}).style("fill", "white");
svg.append('g').attr('class', 'axis').attr('transform',
'translate(0,' + 1.1 * height + ')').text('grt').call(xAxis);
svg.append('g').attr('class', 'ln-chart').call(yAxis);
svg.append("line").attr("x1", 0).attr("x2", 0).attr("y1", 1.1 * height)
.attr("y2", 5).attr("stroke-width", 2).attr("stroke", "black");
svg.append("line").attr("x1", 0).attr("x2", width).attr("y1", 1.1 * height)
.attr("y2", 1.1 * height).attr("stroke-width", 2).attr("stroke",
"black");
svg.selectAll('.axis').append('text').attr('x',230).attr('y',50).text('Percentage of Compliance/Non-Compliance (# measures)').classed('ln-stackedBarChart-label',true);
var getHrefValue = function(yLabel) {
var indexVal = $.inArray(yLabel, nonLinkLabels);
if(indexVal >= 0){
return false;
}
LN.debug(yLabel);
return true;
};
svg.selectAll(".ln-chart").selectAll(".tick").selectAll('text, [y="0"]').attr("text-decoration", "none")
.style("cursor", function(d) {
if($.inArray(d,nonLinkLabels) < 0) {
return "pointer";
} else {
return "";
}
})
.on("click", function(d) {
if(getHrefValue(d)){
document.location.href = LN.getContextPath() +"/" + "/measurecompliancedet" + "/" + d + "/" + "total";
}
}
);
/* DE876 - Group Profile should not let you drill down starts */
} else {
groups.selectAll('rect')
.data(function(d) {
return d;
})
.enter()
.append('rect')
.attr(
'x',
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return xScale(d.x0
* (xMax / labelNamesArray[index].countTotal));
}
}
})
.attr('y', function(d, i) {
return (yScale(d.y) + 2);
})
.attr('height', barHeight)
.attr(
'width',
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return xScale(d.x
* (xMax / labelNamesArray[index].countTotal));
}
}
}).style('fill', function(d, i) {
return d.c;
}).text(function(d, i) {
return numeral(String(d.x)).format('(0,0)');
});
groups.selectAll('BarText')
.data(function(d) {
return d;
})
.enter()
.append('text')
.attr(
"x",
function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
// setting the point x for the text as center of
// the bar width from the point of the bar. so
// that text will be centered.
return ((xScale(d.x0
* (xMax / labelNamesArray[index].countTotal)) + (xScale(d.x
* (xMax / labelNamesArray[index].countTotal))) / 2)-6);
}
}
}).attr('y', function(d, i) {
return yScale(d.y);
}).attr("dy", "13px").text(function(d) {
for (index = 0; index < labelNamesArray.length; index++) {
if (labelNamesArray[index].label == d.y) {
return numeral(d.x).format('0,0');
}
}
}).style("fill", "white");
svg.append('g').attr('class', 'axis')
.attr('transform', 'translate(0,' + 1.1 * height + ')')
.text('grt').call(xAxis);
svg.append('g').attr('class', 'ln-chart').call(yAxis);
svg.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 1.1 * height)
.attr("y2", 5)
.attr("stroke-width", 2)
.attr("stroke", "black");
svg.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", 1.1 * height)
.attr("y2", 1.1 * height)
.attr("stroke-width", 2)
.attr("stroke", "black");
/*
* DE962 - Made the text black from blue.
*/
svg.selectAll(".ln-chart").selectAll(".tick").selectAll('text, [y="0"]').each(function(i, o){
$(this).attr('style', $(this).attr('style') + 'fill:black;');
});
}
/* DE876 - Group Profile should not let you drill down ends */
};