dded tooltip + beautified column chart

js/app.js

@@ -137,7 +137,11 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
                 chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
             }
 
-            drawChart(chartData);
+            drawChart(chartData,[$scope.data.chosenDimension,$scope.data.chosenMeasure]);
+        }
+        else
+        {
+            cleanChart();
         }
     });
 }]);

js/draw-chart.js

@@ -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("");
+}