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(""), var eleChart = d3.select(".chart").html(""),
eleChartBbox = eleChart.node().getBoundingClientRect(), 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, width = +eleChartBbox.width - margin.left - margin.right,
height = +eleChartBbox.height - margin.top - margin.bottom; height = +eleChartBbox.height - margin.top - margin.bottom;
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height); 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]); y = d3.scaleLinear().rangeRound([height, 0]);
var g = svg.append("g") var g = svg.append("g")
@@ -99,13 +99,13 @@ function drawColumnChart(data,axisLabel)
function drawBarChart(data,axisLabel){ function drawBarChart(data,axisLabel){
var eleChart = d3.select(".chart").html(""), var eleChart = d3.select(".chart").html(""),
eleChartBbox = eleChart.node().getBoundingClientRect(), 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, width = +eleChartBbox.width - margin.left - margin.right,
height = +eleChartBbox.height - margin.top - margin.bottom; height = +eleChartBbox.height - margin.top - margin.bottom;
var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height); 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); y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
var g = svg.append("g") var g = svg.append("g")
@@ -115,43 +115,43 @@ function drawBarChart(data,axisLabel){
x.domain([0, d3.max(data, function(d) { return d.x; })]); x.domain([0, d3.max(data, function(d) { return d.x; })]);
y.domain(data.map(function(d) { return d.y; })); y.domain(data.map(function(d) { return d.y; }));
// g.append("g") g.append("g")
// .attr("class", "axis axis-x") .attr("class", "axis axis-x")
// .style("font-size",".75em") .style("font-size",".75em")
// .attr("transform", "translate(0," + height + ")") .attr("transform", "translate(0," + height + ")")
// .call(d3.axisBottom(x)); .call(d3.axisBottom(x).ticks(10));
// g.append("g") g.append("g")
// .attr("class", "axis axis-y") .attr("class", "axis axis-y")
// .style("font-size",".75em") .style("font-size",".75em")
// .call(d3.axisLeft(y).ticks(10)) .call(d3.axisLeft(y))
// .append("text") .append("text")
// .attr("transform", "translate(15,0) rotate(-90)") .attr("transform", "translate(15,0) rotate(-90)")
// .attr("y", 6) .attr("y", 6)
// .attr("dy", "0.71em") .attr("dy", "0.71em")
// .attr("text-anchor", "end") .attr("text-anchor", "end")
// .text("y"); .text("y");
// var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label"; var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
// var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label"; var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
// var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height; var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
// var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65; var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
// g g
// .append('g').classed("label-x",true) .append('g').classed("label-x",true)
// .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')') .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
// .append('text') .append('text')
// .attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
// .text(xLabel); .text(xLabel);
// g g
// .append('g').classed("label-y",true) .append('g').classed("label-y",true)
// .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)') .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
// .append('text') .append('text')
// .attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
// .attr("shape-rendering","crispEdges") .attr("shape-rendering","crispEdges")
// .text(yLabel); .text(yLabel);
var tip_points = d3.tip() var tip_points = d3.tip()
.attr('class', 'd3-tip') .attr('class', 'd3-tip')