From 4fa9d90d04141089c2d9bc0c88c7e489393a5077 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Fri, 17 Mar 2017 08:10:12 +0530
Subject: [PATCH] Completed bar chart

---
 js/draw-chart.js | 72 ++++++++++++++++++++++++------------------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/js/draw-chart.js b/js/draw-chart.js
index 76898a1..7ca2c34 100644
--- a/js/draw-chart.js
+++ b/js/draw-chart.js
@@ -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')