stles added + d3 column added

js/app.js

@@ -2,38 +2,38 @@ var app = angular.module("chart-builder",["ngDrag"]);
 
 app.value("allData",{
     "values":{
-        "Brand" : {
-            "Nike": {
-                "Sales":5000,
-                "Orders":6,
-                "Revenue":800
+        "Brand": {
+            "Sales":{
+                "Adidas": 3500,
+                "Reebok": 4000,
+                "Nike": 7999
             },
-            "Adidas": {
-                "Sales":4500,
-                "Orders":3,
-                "Revenue":753
+            "Orders":{
+                "Adidas": 680,
+                "Reebok": 700,
+                "Nike": 500
             },
-            "Reebok": {
-                "Sales":7120,
-                "Orders":12,
-                "Revenue":1200
+            "Revenue":{
+                "Adidas": 4000,
+                "Reebok": 12000,
+                "Nike": 8000
             }
         },
-        "Category" : {
-            "Laptop": {
-                "Sales":50000,
-                "Orders":600,
-                "Revenue":8000
+        "Category": {
+            "Sales":{
+                "Laptop": 50000,
+                "Mobile": 40000,
+                "E-reader": 8000
             },
-            "Mobile": {
-                "Sales":40000,
-                "Orders":300,
-                "Revenue":12000
+            "Orders":{
+                "Laptop": 600,
+                "Mobile": 300,
+                "E-reader": 50
             },
-            "E-reader": {
-                "Sales":8000,
-                "Orders":50,
-                "Revenue":800
+            "Revenue":{
+                "Laptop": 8000,
+                "Mobile": 12000,
+                "E-reader": 800
             }
         }
     },
@@ -128,4 +128,16 @@ app.controller("mainController", ["allData","$scope",function (allData,$scope) {
 
     }
 
+    $scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure"],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--) {
+                chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
+            }
+
+            drawChart(chartData);
+        }
+    });
 }]);

js/draw-chart.js

@@ -0,0 +1,46 @@
+function drawChart(data)
+{
+  var eleChart = d3.select(".chart").html(""),
+      eleChartBbox = eleChart.node().getBoundingClientRect(),
+      margin = {top: 20, right: 20, bottom: 30, left: 40},
+      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 x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
+      y = d3.scaleLinear().rangeRound([height, 0]);
+
+  var g = svg.append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+  x.domain(data.map(function(d) { return d.x; }));
+  y.domain([0, d3.max(data, function(d) { return d.y; })]);
+
+  g.append("g")
+      .attr("class", "axis axis-x")
+      .attr("transform", "translate(0," + height + ")")
+      .call(d3.axisBottom(x));
+
+  g.append("g")
+      .attr("class", "axis axis-y")
+      .call(d3.axisLeft(y).ticks(10, "%"))
+    .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", 6)
+      .attr("dy", "0.71em")
+      .attr("text-anchor", "end")
+      .text("y");
+
+  g.selectAll(".bar")
+    .data(data)
+    .enter().append("rect")
+      .attr("class", "bar")
+      .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); });
+
+}
+