Grid: add through option; Demo: add connected bar graphs through their legends; Update documentation

Author: uiteoi

README.textile

@@ -797,9 +797,14 @@ All Raphaël Element Attributes are valid, only listed here are those whith defa
     <th>Default value</th>
     <th>Description</th>
   </tr>
+  <tr>
+    <td>through</td>
+    <td>undefined</td>
+    <td>true: grid line extends to graph borders</td>
+  </tr>
   <tr>
     <td>stroke</td>
-    <td>'#eee' (grey)</td>
+    <td>'#eee' (very light grey)</td>
     <td>Stroke color</td>
   </tr>
   <tr>

ico.js

@@ -1051,14 +1051,22 @@ var Ico = {
           x = this.x.start + this.x.start_offset * dx,
           y = this.y.start - this.y.start_offset * dy,
           marker = o.marker_size, fx = d.f[0], fy = d.f[1], angle = d.angle,
-          paper = this.p.paper, grid = o.grid
+          paper = this.p.paper,
+          grid = o.grid, grid_len = ( dx ? 'v-' + t.y.len : 'h' + t.x.len ), grid_x = 0, grid_y = 0
       ;
+      if ( grid && grid.through ) {
+        grid_len += d.padding[ 1 ] + 10;
+        
+        var offset = -d.padding[ 0 ] - this.bbox[ 0 ] - marker - 20;
+        dx ? grid_y = offset : grid_x = offset;
+      }
+      
       if ( dy ) angle += 90;
       var path = [], grid_path = [];
       this.labels || this.get_labels_bounding_boxes( d );
-      this.labels.forEach( function( label ) {
+      this.labels.forEach( function( label, i ) {
         marker &&    path.push( 'M', x, y, dx ? 'v' : 'h-', marker );
-        grid && grid_path.push( 'M', x, y, dx ? 'v-' + t.y.len : 'h' + t.x.len );
+        grid && grid_path.push( 'M', x + ( d.labels[ i ] ? 0 : grid_x ), y + ( d.labels[ i ] ? 0 : grid_y ), grid_len );
         var x_anchor = x + fx;
         var y_anchor = y + fy;
         // label is already drawn, only anchor then rotate here

index.html

@@ -67,6 +67,17 @@
 	margin: 2px;
       }
 
+      .clear {
+        clear: both;
+      }
+      
+      .left_6 {
+        float: left;
+        width: 160px;
+        margin: 0px;
+        padding: 0px;
+      }
+      
       #legend {
         text-align: center;
       }
@@ -115,7 +126,9 @@
       <div id="graph7"  class="rightGraph"></div>
       <div id="graph8"  class="leftGraph"></div>
       <div id="graph9"  class="rightGraph"></div>
-      <h2 id='g10' style="color: blue; margin-top: 20px;">A line of two dependent graphs on the same value range and legend</h2>
+      
+      <div class="clear"></div>
+      <h2 id='g10' style="color: blue; margin-top: 50px;">A line of two dependent graphs on the same value range and legend</h2>
       <p>Click legend labels bellow to toggle (show/hide) series:</p>
       <p id="legend">
         <span id="legend_this_year" class="legend">This Year Performance</span>
@@ -125,8 +138,16 @@ <h2 id='g10' style="color: blue; margin-top: 20px;">A line of two dependent grap
       </p>
       <div id="graph10" class="leftGraph"></div>
       <div id="graph11" class="rightGraph"></div>
-      <div id="graph12" class="leftGraph"></div>
-      <div id="graph13" class="rightGraph"></div>
+      
+      <div class="clear"></div>
+      <h2 id='g10' style="color: blue; margin-top: 50px;">6 Horinzontal Bar Graphs connected through their grids, the left-most holding only the labels</h2>
+      <div class="clear"></div>
+      <div id="graph12" class="left_6"></div>
+      <div id="graph13" class="left_6"></div>
+      <div id="graph14" class="left_6"></div>
+      <div id="graph15" class="left_6"></div>
+      <div id="graph16" class="left_6"></div>
+      <div id="graph17" class="left_6"></div>
     </div>
 
     <script type="text/javascript">
@@ -409,6 +430,53 @@ <h2 id='g10' style="color: blue; margin-top: 20px;">A line of two dependent grap
       set_legend( [g10], [2], $('legend_intermitent') );
       set_legend( [g11], [1], $('legend_moving_average')  );
 
+      var countries = [
+        "Zimbabwe", "Ireland", "Argentina", "New Zealand", "Sri Lanka", "Finland"
+      ];
+      
+      var data = [
+        [ 1500, 1200, 750, 845, 756, 124 ],
+        [ 45, 78, 21, 102, 51, 87 ],
+        [ 17, 21, 15, 18, 8, 12 ],
+        [ 54, 87, 12, 201, 15, 78 ],
+        [ 51, 21, 57, 548, 657, 421 ]
+      ];
+      
+      var options = {
+          labels: {
+            values: countries, long_values: countries,
+            marker_size: 0,
+            font: { fill: 'blue' },
+            grid: { through: true
+              , 'stroke-width': 1
+              , stroke: '#ccc'
+            }
+          }
+        , value_labels: {
+            marker_size: 3,
+            font: { fill: 'white' }
+          }
+        , units: ''
+        , color: '#ccccff'
+        , axis: false
+        , status_bar : true
+        , width: 161
+        , height: 140
+        , x_padding_left: 20
+        , x_padding_right: 0
+      }
+      
+      new Ico.HorizontalBarGraph( "graph12", [ null ,null ,null ,null ,null ,null ], options );
+      options.labels.values = [ '', '', '', '', '', '' ];
+      options.value_labels.font.fill = "black";
+      options.x_padding_right = 20;
+      
+      new Ico.HorizontalBarGraph( "graph13", data[ 0 ], options );
+      new Ico.HorizontalBarGraph( "graph14", data[ 1 ], options );
+      new Ico.HorizontalBarGraph( "graph15", data[ 2 ], options );
+      new Ico.HorizontalBarGraph( "graph16", data[ 3 ], options );
+      new Ico.HorizontalBarGraph( "graph17", data[ 4 ], options );
+      
       /*
       new Ico.LineGraph(
           document.getElementById( 'graph12' )