// source: http://jsfiddle.net/2khbceut/1/
// datajb = data from 1 club from 1 year in JSON format
// max_axis_value = the x axis maximum value
// pos = ranking of the club
/**
* Renders the stacked bar chart
* @param datajb data object to render containing the data of one club of one year
* @param max_axis_value max absolute value for the stacked bar chart
* @param drawid id of the element in which to draw the stacked bar chart
*/
function buildgraphic(datajb, max_axis_value, drawid) {
/*
console.log("datajb: " + datajb);
console.log(datajb);
console.log("max_axis_value: " + max_axis_value);
console.log("drawid: " + drawid);
// */
var svg = d3.select(drawid);
//console.log("svg: ");
//console.log(svg);
var margin = {top: 0, right: 0, bottom: 0, left: 0};
//console.log("margin vor: ");
//console.log(margin);
//console.log("margin nach: ");
console.log(svg.attr("width"));
var width = svg.attr("width") - margin.left - margin.right;
//console.log("width: ");
//console.log(width);
var height = svg.attr("height") - margin.top - margin.bottom;
//console.log("height: " + height);
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//console.log("g: " + g);
var i = 0;
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = svg.attr("width"),
height = svg.attr("height");
//var y = d3.scale.ordinal().rangeRoundBands([0, height], .3);
//var y = d3.scaleBand().rangeRound([0, height]).padding(0.3);
var y = d3.scaleOrdinal().range([0, height], .3);
//var x = d3.scale.linear().rangeRound([0, width]);
var x = d3.scaleLinear().range([0, width]);
var color = d3.scaleOrdinal()
.range([colors.kl, colors.ll, colors.ls, colors.sl, colors.ss, colors.ss, colors.sl, colors.ls, colors.ll, colors.kl]);
var xAxis = d3.axisTop().scale(x);
var yAxis = d3.axisLeft().scale(y);
//console.log(drawid);
/*
var svg = d3.select(drawid).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("id", "d3-plot")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
*/
color.domain(["ENKL", "ENLL", "ENLS", "ENSL", "ENSS", "ESSS", "ESSL", "ESLS", "ESLL", "ESKL"]);
var datajbEin = [datajb];
/*
console.log("StartdatajbEin");
console.log(datajbEin);
console.log("EnddatajbEin");
*/
// TODO schleife wird immer nur einmal ausgefuehrt
datajbEin.forEach(function (d) {
//console.log("Frankreich");
//console.log(d);
// calc percentages
var len = d["ES"] + d["EN"];
d["ENSS"] = +d["ENSS"];
d["ENSL"] = +d["ENSL"];
d["ENLS"] = +d["ENLS"];
d["ENLL"] = +d["ENLL"];
d["ENKL"] = +d["ENKL"];
d["ESLL"] = +d["ESLL"];
d["ESLS"] = +d["ESLS"];
d["ESSL"] = +d["ESSL"];
d["ESSS"] = +d["ESSS"];
d["ESKL"] = +d["ESKL"];
// TODO edit here
var x0 = -1 * d["EN"];
var idx = 0;
d.boxes = color.domain().map(function (name) {
return {name: name, x0: x0, x1: x0 += +d[name]};
});
});
var min_val = d3.min(datajbEin, function (d) {
return (-1) * max_axis_value;
});
var max_val = d3.max(datajbEin, function (d) {
return max_axis_value;
});
x.domain([min_val, max_val]).nice();
y.domain(datajbEin.map(function (d) {
return d.name;
}));
/*
svg.append("g")
.attr("class", "x axis")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis); // */
var vakken = svg.selectAll(".name")
.data(datajbEin)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function (d) {
return "translate(0," + y(d.name) + ")";
});
//console.log(vakken);
var bars = vakken.selectAll("rect")
.data(function (d) {
return d.boxes;
})
.enter().append("g").attr("class", "subbar"); // */
bars.append("rect")
.attr("height", height /*y.range()/2*/) // y.rangeBand()/2
.attr("stroke-width", function (d) {
return 0;
})
.attr("x", function (d) {
if (isNaN(d.x0)) {
console.log("x" + i++);
console.log(d);
}
return x(d.x0);
})
.attr("width", function (d) {
if (isNaN(x(d.x0)) || isNaN(x(d.x1))) {
console.log("width" + i++);
console.log(d);
}
return x(d.x1) - x(d.x0);
})
.style("fill", function (d) {
return color(d.name);
}); // */
//console.log(bars);
// Beschriftung // remove Numbers here
bars.append("text")
.attr("x", function (d) {
return x(d.x0);
})
.attr("y", height / 2) // rangeBand()/2
.attr("dy", "0.5em")
.attr("dx", "0.5em")
.style("font", "10px sans-serif")
.style("text-anchor", "begin")
.text(function (d) {
return d.n !== 0 && (d.x1 - d.x0) > 3 ? d.n : ""
});
/*
vakken.insert("rect",":first-child")
.attr("height", y.rangeBand())
.attr("x", "1")
.attr("width", width)
.attr("fill-opacity", "0.5")
.style("fill", "#F5F5F5")
.attr("class", function(d,index) { return index%2==0 ? "even" : "uneven"; }); // */
// Horizontal linie
/*
console.log(x(1));
*/
svg.append("g")
.attr("class", "y axis")
.append("line")
.attr("x1", x(0))
.attr("x2", x(0))
.attr("x3", x(0))
.attr("x4", x(0))
.attr("y2", height);
var startp = svg.append("g").attr("class", "legendbox").attr("id", "mylegendbox");
// this is not nice, we should calculate the bounding box and use that
d3.selectAll(".axis path")
.style("fill", "none")
.style("stroke", "#000")
.style("shape-rendering", "crispEdges");
d3.selectAll(".axis line")
.style("fill", "none")
.style("stroke", "#000")
.style("shape-rendering", "crispEdges");
var movesize = width / 2 - width / 2;//startp.node().getBBox().width/2;
d3.selectAll(".legendbox").attr("transform", "translate(" + movesize + ",0)");
}