stles added + d3 column added

index.html

@@ -52,12 +52,16 @@
                 </div>
             </div>
             <div class="chart-container">
+                
                 <div class="chart"></div>
+                
             </div>
         </div>
     </div>
     <script type="text/javascript" src="lib/angular.min.js"></script>
     <script type="text/javascript" src="js/ng-drag.js"></script>
+    <script type="text/javascript" src="lib/d3.v4.min.js"></script>
+    <script type="text/javascript" src="js/draw-chart.js"></script>
     <script type="text/javascript" src="js/app.js"></script>
 </body>
 </html>

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

style.css

@@ -53,7 +53,7 @@ body
 
 .chooser>*,.chosen>*
 {
-    padding: 0 .5em;
+    padding: .5em;
 }
 
 .main-content
@@ -93,6 +93,12 @@ body
 
     width: 80%;
     height: 80%;
+}
+
+.chart
+{
+    width: 100%;
+    height: 100%;
         
     background-color: lightgray;
 }
@@ -103,4 +109,40 @@ ul.unstyled-list
 
     padding: 0;
     margin: 0;
+}
+
+.dim-header,.measure-header{
+    /*border: 2px solid black;*/
+    text-decoration: underline;
+    padding-bottom: 1em;
+}
+
+.chooser-dim,.chooser-measure,.chosen-dim,.chosen-measure
+{
+    border: 2px solid black;
+}
+.chooser-measure{
+    border-top: none;
+}
+.chosen-dim,.chosen-measure
+{
+    border-left: none;
+}
+.chosen-measure
+{
+    border-top: none;
+}
+
+
+/* d3 styles*/
+.bar {
+  fill: steelblue;
+}
+
+.bar:hover {
+  fill: brown;
+}
+
+.axis--x path {
+  display: none;
 }