84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
|
HorizontalBarChart = {
|
||
|
|
init: function(svg, html_tag_attr, dataset, xBar, yBar, wBar, hBar, color, yScale){
|
||
|
|
this.xBar = xBar;
|
||
|
|
this.yBar = yBar;
|
||
|
|
this.wBar = wBar;
|
||
|
|
this.hBar = hBar;
|
||
|
|
this.color = color;
|
||
|
|
this.yScale = yScale;
|
||
|
|
|
||
|
|
svg.selectAll("rect")
|
||
|
|
.data(dataset)
|
||
|
|
.enter()
|
||
|
|
.append("rect")
|
||
|
|
.attr("x", this.xBar)
|
||
|
|
.attr("y", this.yBar)
|
||
|
|
.attr("width", this.wBar)
|
||
|
|
.attr("height", this.hBar)
|
||
|
|
.attr("fill", this.color);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
VerticalBarChartSimplified = {
|
||
|
|
init: function(svg, dataset, xBar, yBar, wBar, hBar){ //, is_tooltip=false, tooltipXPosition=false, tooltipYPosition=false
|
||
|
|
console.log("test init ");
|
||
|
|
svg.selectAll("rect")
|
||
|
|
.data(dataset)
|
||
|
|
.enter()
|
||
|
|
.append("rect")
|
||
|
|
.attr("x", xBar)
|
||
|
|
.attr("y", yBar)
|
||
|
|
.attr("width", wBar)
|
||
|
|
.attr("height", hBar)
|
||
|
|
.attr("fill", "teal");
|
||
|
|
} //ENDOF init()
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
VerticalBarChart = {
|
||
|
|
margin: {top: 20, right: 0, bottom: 0, left: 80},
|
||
|
|
|
||
|
|
init: function(svg, html_tag_attr, dataset, xBar, yBar, wBar, hBar, color, xScale){ //, is_tooltip=false, tooltipXPosition=false, tooltipYPosition=false
|
||
|
|
this.xBar = xBar;
|
||
|
|
this.yBar = yBar;
|
||
|
|
this.wBar = wBar;
|
||
|
|
this.hBar = hBar;
|
||
|
|
this.color = color;
|
||
|
|
this.xScale = xScale;
|
||
|
|
|
||
|
|
return svg.selectAll("rect")
|
||
|
|
.data(dataset)
|
||
|
|
.enter()
|
||
|
|
.append("rect")
|
||
|
|
.attr("x", this.xBar)
|
||
|
|
.attr("y", this.yBar)
|
||
|
|
.attr("width", this.wBar)
|
||
|
|
.attr("height", this.hBar)
|
||
|
|
.attr("fill", this.color)
|
||
|
|
.classed("hidden", true)
|
||
|
|
.on("mouseover", function(d){
|
||
|
|
var xPosition = d3.select(this).attr("x"); // + xScale.bandwidth() / 2
|
||
|
|
var yPosition = parseFloat(d3.select(this).attr("y")); // / 2 + height / 2
|
||
|
|
d3.select("#tooltip")
|
||
|
|
.style("left", xPosition + "px")
|
||
|
|
.style("top", yPosition + "px")
|
||
|
|
//.style("position", "absolute")
|
||
|
|
.select("#value")
|
||
|
|
.text(d.x +": CHF"+ d.y);
|
||
|
|
|
||
|
|
d3.select("#tooltip").classed("hidden", false);
|
||
|
|
})
|
||
|
|
.on("mouseout", function(){
|
||
|
|
d3.select("#tooltip").classed("hidden", true);
|
||
|
|
})
|
||
|
|
;
|
||
|
|
|
||
|
|
//var y = d3.scaleLinear().range([(height), this.margin.top]);
|
||
|
|
//y.domain([0, d3.max(dataset, function(d){ return +d.y + 0; })]);
|
||
|
|
|
||
|
|
} //ENDOF init()
|
||
|
|
|
||
|
|
};
|