bendtherules/chart-builder-demo
1
0
Fork 0
mirror of https://github.com/bendtherules/chart-builder-demo.git synced 2026-08-18 13:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

dded tooltip + beautified column chart

Browse Source
This commit is contained in:
bendtherules
2017-03-17 06:40:03 +05:30
parent a9b89a6f96
commit 12d3444c7f
5 changed files with 376 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/draw-chart.js
+48 -8
View File
@@ -1,14 +1,14 @@
function drawChart(data)
function drawChart(data,axisLabel)
{
var eleChart = d3.select(".chart").html(""),
eleChartBbox = eleChart.node().getBoundingClientRect(),
margin = {top: 20, right: 20, bottom: 30, left: 40},
margin = {top: 35, right: 20, bottom: 60, left: 70},
width = +eleChartBbox.width - margin.left - margin.right,
height = +eleChartBbox.height - margin.top - margin.bottom;
var svg = eleChart.append("svg").attr("width",width).attr("height",height);
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
@@ -20,19 +20,48 @@ function drawChart(data)
g.append("g")
.attr("class", "axis axis-x")
.style("font-size",".75em")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis-y")
.call(d3.axisLeft(y).ticks(10, "%"))
.style("font-size",".75em")
.call(d3.axisLeft(y).ticks(10))
.append("text")
.attr("transform", "rotate(-90)")
.attr("transform", "translate(15,0) rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("y");
var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
g
.append('g').classed("label-x",true)
.attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
.append('text')
.attr('text-anchor', 'middle')
.text(xLabel);
g
.append('g').classed("label-y",true)
.attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
.append('text')
.attr('text-anchor', 'middle')
.attr("shape-rendering","crispEdges")
.text(yLabel);
var tip_points = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) { return d.y; });
var vis = svg.call(tip_points);
g.selectAll(".bar")
.data(data)
.enter().append("rect")
@@ -40,7 +69,18 @@ function drawChart(data)
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d.y); });
.attr("height", function(d) { return height - y(d.y); })
.on('mouseover', function () {
tip_points.show.apply(this,arguments);
})
.on('mouseout', function () {
tip_points.hide.apply(this,arguments);
});
}
function cleanChart() {
var eleChart = d3.select(".chart").html("");
}