93 lines
2.6 KiB
JavaScript
93 lines
2.6 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);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
//VerticalBarChart = {
|
||
|
|
// init: function(svg, dataset, xBar, yBar, wBar, hBar){ //, is_tooltip=false, tooltipXPosition=false, tooltipYPosition=false
|
||
|
|
// svg.selectAll("rect")
|
||
|
|
// .data(dataset)
|
||
|
|
// .enter()
|
||
|
|
// .append("rect")
|
||
|
|
// .attr("x", xBar)
|
||
|
|
// .attr("y", yBar)
|
||
|
|
// .attr("width", wBar)
|
||
|
|
// .attr("height", hBar)
|
||
|
|
// .attr("fill", "grey");
|
||
|
|
// } //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;
|
||
|
|
|
||
|
|
var height = $(html_tag_attr).height();
|
||
|
|
|
||
|
|
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; })]);
|
||
|
|
|
||
|
|
// Add the Y Axis
|
||
|
|
svg.append("g")
|
||
|
|
.attr("class", "axis")
|
||
|
|
.call(d3.axisLeft(y))
|
||
|
|
.selectAll("text")
|
||
|
|
.style("text-anchor", "end")
|
||
|
|
;
|
||
|
|
|
||
|
|
} //ENDOF init()
|
||
|
|
|
||
|
|
};
|