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

Completed bar chart

Browse Source
This commit is contained in:
bendtherules
2017-03-17 08:10:12 +05:30
parent d39997486f
commit 4fa9d90d04
1 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/draw-chart.js
+36 -36
View File
@@ -17,13 +17,13 @@ function drawColumnChart(data,axisLabel)
{
var eleChart = d3.select(".chart").html(""),
eleChartBbox = eleChart.node().getBoundingClientRect(),
margin = {top: 35, right: 20, bottom: 60, left: 70},
margin = {top: 15, right: 30, 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",eleChartBbox.width).attr("height",eleChartBbox.height);
var x = d3.scaleBand().rangeRound([0, width/1.1]).padding(0.25),
var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g")
@@ -99,13 +99,13 @@ function drawColumnChart(data,axisLabel)
function drawBarChart(data,axisLabel){
var eleChart = d3.select(".chart").html(""),
eleChartBbox = eleChart.node().getBoundingClientRect(),
margin = {top: 20, right: 35, bottom: 70, left: 60},
margin = {top: 15, right: 30, bottom: 60, left: 80},
width = +eleChartBbox.width - margin.left - margin.right,
height = +eleChartBbox.height - margin.top - margin.bottom;
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
var x = d3.scaleLinear().rangeRound([0, width/1.1]),
var x = d3.scaleLinear().rangeRound([0, width]),
y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
var g = svg.append("g")
@@ -115,43 +115,43 @@ function drawBarChart(data,axisLabel){
x.domain([0, d3.max(data, function(d) { return d.x; })]);
y.domain(data.map(function(d) { return d.y; }));
// 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-x")
.style("font-size",".75em")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(10));
// g.append("g")
// .attr("class", "axis axis-y")
// .style("font-size",".75em")
// .call(d3.axisLeft(y).ticks(10))
// .append("text")
// .attr("transform", "translate(15,0) rotate(-90)")
// .attr("y", 6)
// .attr("dy", "0.71em")
// .attr("text-anchor", "end")
// .text("y");
g.append("g")
.attr("class", "axis axis-y")
.style("font-size",".75em")
.call(d3.axisLeft(y))
.append("text")
.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 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;
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-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);
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')