Bar chart half done

index.html

@@ -52,7 +52,9 @@
                 </div>
             </div>
             <div class="chart-container">
-                
+                <div class="chart-selector-container">
+                    <select class="chart-selector" ng-options="chartName as chartName|uppercase for chartName in chartTypes" ng-model="chartTypeChosen"></select>
+                </div>
                 <div class="chart"></div>
                 
             </div>

js/app.js

@@ -41,13 +41,19 @@ app.value("allData",{
     "measures": ["Sales","Orders","Revenue"]
 });
 
-app.controller("mainController", ["allData","$scope",function (allData,$scope) {
+app.value("chartTypes",["column","bar","pie"]);
+
+
+app.controller("mainController", ["allData","chartTypes","$scope",function (allData,chartTypes,$scope) {
     $scope.data = {};
     $scope.data.chooserDimensions = allData.dimensions;
     $scope.data.chosenDimension = undefined;
     $scope.data.chooserMeasures = allData.measures;
     $scope.data.chosenMeasure = undefined;
 
+    $scope.chartTypes = chartTypes;
+    $scope.chartTypeChosen = chartTypes[0];
+
     $scope.data.values = allData.values;
 
     $scope.allowDrop = function(ev,location) {
@@ -128,16 +134,28 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
 
     }
 
-    $scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure"],function(){
+    $scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure","chartTypeChosen"],function(){
         if ($scope.data.chosenMeasure && $scope.data.chosenDimension){
             var tmpData = $scope.data.values[$scope.data.chosenDimension][$scope.data.chosenMeasure];
             var chartData = [];
             var keys = Object.keys(tmpData);
-            for (var i = keys.length - 1; i >= 0; i--) {
+            var axisLabel;
-                chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
+            if ($scope.chartTypeChosen.toLowerCase() === "bar")
+            {
+                for (var i = keys.length - 1; i >= 0; i--) {
+                    chartData.push({"y":keys[i],"x":tmpData[keys[i]]});
+                }
+                axisLabel = [$scope.data.chosenMeasure,$scope.data.chosenDimension];
+            }
+            else
+            {
+                for (var i = keys.length - 1; i >= 0; i--) {
+                    chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
+                }   
+                axisLabel = [$scope.data.chosenDimension,$scope.data.chosenMeasure];
             }
 
-            drawChart(chartData,[$scope.data.chosenDimension,$scope.data.chosenMeasure]);
+            drawChart($scope.chartTypeChosen,chartData,axisLabel);
         }
         else
         {

js/draw-chart.js

@@ -1,4 +1,19 @@
-function drawChart(data,axisLabel)
+
+function drawChart(type,data,axisLabel) {
+  var typeMapping = {
+    "column" : drawColumnChart,
+    "bar" : drawBarChart,
+    // "pie" : drawPieChart
+  };
+  if (typeof(type) === "string"){
+    var drawFunc = typeMapping[type.toLowerCase()];
+    if (typeof(drawFunc) !== undefined){
+      drawFunc(data,axisLabel);
+    }
+  }
+}
+
+function drawColumnChart(data,axisLabel)
 {
   var eleChart = d3.select(".chart").html(""),
       eleChartBbox = eleChart.node().getBoundingClientRect(),
@@ -8,7 +23,7 @@ function drawChart(data,axisLabel)
 
   var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
 
-  var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
+  var x = d3.scaleBand().rangeRound([0, width/1.1]).padding(0.25),
       y = d3.scaleLinear().rangeRound([height, 0]);
 
   var g = svg.append("g")
@@ -81,6 +96,95 @@ function drawChart(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},
+      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]),
+      y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
+
+  var g = svg.append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+  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-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");
+
+  // 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.x; });
+
+  var vis = svg.call(tip_points);
+
+  g.selectAll(".bar")
+    .data(data)
+    .enter().append("rect")
+      .attr("class", "bar")
+      .attr("x", function(d) { return 0; })
+      .attr("y", function(d) { return y(d.y); })
+      .attr("width", function(d) { return x(d.x); })
+      .attr("height", y.bandwidth())
+      .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("");
 }

style.css

@@ -98,7 +98,7 @@ body
 .chart
 {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 3em);
         
     /*background-color: lightgray;*/
     overflow: hidden;
@@ -134,6 +134,18 @@ ul.unstyled-list
     border-top: none;
 }
 
+.chart-selector-container
+{
+    width: 100%;
+    height: 3em;
+    padding: 1em;
+}
+
+.chart-selector
+{
+    float: right;
+    /*margin-right: 1em;*/
+}
 
 /* d3 styles*/
 .bar {