added chart to the page

app/assets/javascripts/crops.js.erb

@@ -1,3 +1,5 @@
+//= require graphs/horizontal_bar_graph
+
 if (document.getElementById("cropmap") !== null) {
   mapbox_map_id = "<%= Rails.env == 'test' ? 0 : Growstuff::Application.config.mapbox_map_id %>";
   mapbox_base_url = "https://c.tiles.mapbox.com/v3/" + mapbox_map_id + "/{z}/{x}/{y}.png";
@@ -47,3 +49,22 @@ function showCropMap(cropmap) {
 
   cropmap.addLayer(markers);
 }
+
+if ($("#sunchart")[0] !== null) {
+  var HorizontalBarGraph = growstuff.HorizontalBarGraph;
+  var bars = [
+    {name: 'Shade', value: 2},
+    {name: 'Half Shade', value: 5}
+  ];
+  data = {
+    bars: bars,
+    width: {size: 200, scale: 'linear'},
+    height: {size: 300, scale: 'ordinal'},
+    //left is used to shift the bars over so that there is
+    //room for the labels
+    margin: {top: 0, right: 0, bottom: 0, left: 100}
+  };
+
+  var graph = new HorizontalBarGraph(data);
+  graph.render(d3.select($('#sunchart')[0]));
+}

app/assets/javascripts/graphs/bar_group.js

@@ -16,12 +16,19 @@ BarGroup.prototype.render = function(root){
   var data = this._data;
   var bars = this._data.bars;
   var xScale = new GraphScale(data, 'width').render();
+  var yScale = new GraphScale(data, 'height').render();
+
   return root.append('g')
     .attr("class", "bar")
     .selectAll("rect")
     .data(bars.map(function(bar) { return bar.value; }))
     .enter()
     .append("rect")
+    .attr("y", function(d, i){
+      return yScale(i);
+
+    })
+    .attr("height", yScale.rangeBand())
       .attr("fill", "rebeccapurple")
       .attr("width", function(d){
         return xScale(d);

app/assets/javascripts/graphs/graph_scale.js

@@ -15,9 +15,18 @@
     var axisName = this._axisName;
     var scaleType = data[axisName].scale;
     var axisSize = data[axisName].size;
-    return d3.scale[scaleType]()
-    .domain([0, d3.max(this.getBarValues())])
-      .range([0, axisSize]);
+
+    if (axisName === 'width'){
+      return d3.scale[scaleType]()
+        .domain([0, d3.max(this.getBarValues())])
+        .range([0, axisSize]);
+    }
+    else{
+      return d3.scale[scaleType]()
+        .domain(d3.range(data.bars.length))
+        .rangeRoundBands([0, data.height.size], 0.05, 0);
+    }
+
 
   };
 

app/assets/javascripts/graphs/horizontal_bar_graph.js

@@ -25,9 +25,6 @@
     var barLabelGroup = new BarLabelGroup(this._data);
     var margin = this._data.margin;
 
-    var xScale = new GraphScale(this._data, 'width');
-    var yScale = new GraphScale(this._data, 'y');
-
     var barGroup = new BarGroup(this._data);
 
     var svg = root

app/views/crops/show.html.haml

@@ -30,6 +30,7 @@
       - if current_member && current_member.location.blank?
         = link_to "Set your location.", edit_member_registration_path
 
+    %div#sunchart
 
     %div#cropmap
 
@@ -68,3 +69,4 @@
     = render :partial => 'plantings', :locals => { :crop => @crop }
     = render :partial => 'harvests', :locals => { :crop => @crop }
     = render :partial => 'find_seeds', :locals => { :crop => @crop }
+

spec/javascripts/graphs/graph_scale_spec.js

@@ -2,7 +2,7 @@
   'use strict';
 
   describe('GraphScale', function(){
-    var GraphScale, subject;
+    var data, GraphScale, subject;
 
     beforeEach(function(){
       GraphScale = growstuff.GraphScale;
@@ -10,22 +10,47 @@
         {name: 'Shade', value: 0.2},
         {name: 'Half Shade', value: 0.5}
       ];
-      var data = {
+      data = {
         bars: bars,
         width: {size: 300, scale: 'linear'},
         height: {size: 400, scale: 'ordinal'}
       };
-
-
-      subject = new GraphScale(data, 'width');
-      subject.render(d3.select('#jasmine_content').append('svg'));
     });
 
+    describe('when specifying width', function() {
+      var mockD3;
+      beforeEach(function() {
+        subject = new GraphScale(data, 'width');
+        mockD3 = jasmine.createSpyObj('d3', ['domain', 'range', 'max']);
+        mockD3.domain.and.returnValue(mockD3);
+        mockD3.range.and.returnValue(mockD3);
+        spyOn(d3.scale, 'linear').and.returnValue(mockD3);
+        subject.render();
+      });
+      it ('gets the values of all the bars', function(){
+        expect(subject.getBarValues()).toEqual([0.2, 0.5]);
+      });
+
+      it ('calls the d3 range function to draw the width', function(){
+        expect(mockD3.range).toHaveBeenCalledWith([0, 300]);
+      });
 
-    it ('gets the values of all the bars', function(){
-      expect(subject.getBarValues()).toEqual([0.2, 0.5]);
     });
 
+    describe('when specifying height', function() {
+      var mockD3;
+      beforeEach(function() {
+        subject = new GraphScale(data, 'height');
+        mockD3 = jasmine.createSpyObj('d3', ['domain', 'rangeRoundBands']);
+        mockD3.domain.and.returnValue(mockD3);
+        mockD3.rangeRoundBands.and.returnValue(mockD3);
+        spyOn(d3.scale, 'ordinal').and.returnValue(mockD3);
+        subject.render();
+      });
+      it ('calls the d3 range round bands function to draw the height', function(){
+        expect(mockD3.rangeRoundBands).toHaveBeenCalledWith([0, 200], 0.05, 0);
+      });
+    });
   });
 
 })();

spec/javascripts/graphs/horizontal_bar_graph_spec.js

@@ -61,8 +61,8 @@
       });
 
       it ('on the y axis, all bars are the same height', function(){
-        expect('g.bar rect:eq(0)').toHaveAttr('height', 100);
-        expect('g.bar rect:eq(1)').toHaveAttr('height', 100);
+        expect('g.bar rect:eq(0)').toHaveAttr('height', 195);
+        expect('g.bar rect:eq(1)').toHaveAttr('height', 195);
       });
 
   });