Cater for negative values & tweak some of the examples.

benaskins · Apr 15, 2009 · b07b290 · b07b290
1 parent 477fa59
commit b07b290
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -74,13 +74,22 @@ <h2>
           </tfoot>
           <tbody>
             <tr>
-              <td>25</td>
-              <td>23</td>
-              <td>23</td>
-              <td>28</td>
-              <td>28</td>
-              <td>22</td>
-              <td>25</td>
+              <td class="pos">20</td>
+              <td class="pos">23</td>
+              <td class="pos">23</td>
+              <td class="pos">28</td>
+              <td class="pos">28</td>
+              <td class="pos">22</td>
+              <td class="pos">25</td>
+            </tr>
+            <tr>
+              <td class="neg">-5</td>
+              <td class="neg">-2</td>
+              <td class="neg">5</td>
+              <td class="neg">6</td>
+              <td class="neg">-1</td>
+              <td class="neg">-3</td>
+              <td class="neg">5</td>
             </tr>
           </tbody>
         </table>
@@ -144,7 +153,7 @@ <h3>Rain in 7 days (with y-axis labels)</h3>
 
       <h3>Combined Temperature / Rain </h3>
       <pre>$("#combined_graph_holder").simplegraph(temp_data, temp_labels,
-  {penColor: "#f00", leftGutter: 90, units: "ºC", minYAxisValue: 30, yAxisCaption: "Max Temp"})
+  {penColor: "#f00", leftGutter: 90, units: "ºC", minYAxisValue: 30, yAxisCaption: "Max Temp", lowerBound: -10})
     .simplegraph.more(rain_data, 
       {penColor: "#00f", units: "mm", minYAxisValue: 10, yAxisCaption: "Max Rainfall"});</pre>                
       <div id='combined_graph_holder'></div>                  

diff --git a/jquery.simplegraph.js b/jquery.simplegraph.js
@@ -80,7 +80,7 @@ function DataSet(data, labels, settings) {
       grid.height
     ).attr({stroke: this.settings.lineColor, fill: this.settings.lineColor, opacity: 0.3}); //TODO PARAMS - legend border and fill style
 
-    for (var i = 1, ii = (grid.rows) + 1; i < ii; i = i + 2) {
+    for (var i = 1, ii = (grid.rows); i < (ii - this.settings.lowerBound/2); i = i + 2) {
       var value = (ii - i)*2,
           y     = grid.y(value) + 4, // TODO: Value of 4 works for default dimensions, expect will need to scale
           x     = grid.leftEdge - (6 + this.settings.yAxisOffset);    
@@ -131,10 +131,10 @@ function DataSet(data, labels, settings) {
           bars.rect(x + dataSet.settings.barOffset, y, dataSet.settings.barWidth, (dataSet.settings.height - dataSet.settings.bottomGutter) - y).attr({fill: dataSet.settings.barColor, stroke: "none"});
         }
         if (dataSet.settings.drawLine) {
-          line_path[i == 0 ? "moveTo" : "lineTo"](x, y, 10);
+          line_path[i == 0 ? "moveTo" : "cplineTo"](x, y, 5);
         }
         if (dataSet.settings.fillUnderLine) {
-          fill_path[i == 0 ? "lineTo" : "lineTo"](x, y, 10);
+          fill_path[i == 0 ? "lineTo" : "cplineTo"](x, y, 5);
         }
         if (dataSet.settings.addHover) {
           var rect = canvas.rect(x - 50, y - 50, 100, 100).attr({stroke: "none", fill: "#fff", opacity: 0}); //TODO PARAM - hover target width / height
@@ -185,7 +185,7 @@ function Grid(dataSet, settings) {
     this.topEdge  = this.settings.topGutter;
     this.width    = this.settings.width - this.settings.leftGutter - this.X;
     this.columns  = this.dataSet.data.length - 1; 
-    this.rows     = this.maxValueYAxis / 2; //TODO PARAM - steps per row    
+    this.rows     = (this.maxValueYAxis - this.settings.lowerBound) / 2; //TODO PARAM - steps per row    
   };
 
   this.draw = function(canvas) {
@@ -263,7 +263,7 @@ function Grid(dataSet, settings) {
     topGutter: 20,
     // Label Style
     labelColor: "#000",
-    labelFont: "Verdana",
+    labelFont: "Helvetica",
     labelFontSize: "10px",
     labelFontWeight: "normal",
     // Grid Style

diff --git a/sample.js b/sample.js
@@ -1,13 +1,16 @@
 $(function () {
 
   // Get the data
-  var temp_labels = [], temp_data = [];
+  var temp_labels = [], temp_data = [], neg_temp_data = [];
   $("#temp-data tfoot th").each(function () {
       temp_labels.push($(this).html());
   });
-  $("#temp-data tbody td").each(function () {
+  $("#temp-data tbody td.pos").each(function () {
       temp_data.push($(this).html());
   });
+  $("#temp-data tbody td.neg").each(function () {
+      neg_temp_data.push($(this).html());
+  });
   var rain_labels = [], rain_data = [];
   $("#rain-data tfoot th").each(function () {
       rain_labels.push($(this).html());
@@ -26,16 +29,16 @@ $(function () {
 
   // - Temperature Graph - adds colour, fill, and a minimum value for the y axis
   $("#temp_graph_holder").simplegraph(temp_data, temp_labels,
-    {penColor: "#f00", fillUnderLine: true, units: "ºC", minYAxisValue: 30});
+    {penColor: "#f00", fillUnderLine: true, units: "ºC", minYAxisValue: 30, drawPoints: true});
 
   // - Rain Graph - adds a caption to the y axis
   $("#rain_graph_holder").simplegraph(rain_data, rain_labels,
     {penColor: "#00f", units: "mm", leftGutter: 60, minYAxisValue: 10, yAxisCaption: "Max Rainfall", yAxisLabelFont: "Times New Roman"});
 
   // - Combined Graph - plots two data sets with different scales on the one graph
-  $("#combined_graph_holder").simplegraph(temp_data, temp_labels,
-    {penColor: "#f00", leftGutter: 90, units: "ºC", minYAxisValue: 30, yAxisCaption: "Max Temp"})
-    .simplegraph_more(rain_data, {penColor: "#00f", units: "mm", minYAxisValue: 10, yAxisCaption: "Max Rainfall"});
+  $("#combined_graph_holder").simplegraph(neg_temp_data, temp_labels,
+    {penColor: "#f00", leftGutter: 90, units: "ºC", minYAxisValue: 10, yAxisCaption: "Max Temp", lowerBound: -10, drawPoints: true})
+    .simplegraph_more(rain_data, {penColor: "#00f", units: "mm", minYAxisValue: 10, yAxisCaption: "Max Rainfall", lowerBound: 0});
 
   // - Bar Temperature Graph - adds colour, fill, and a minimum value for the y axis
   $("#bar_graph_holder").simplegraph(temp_data, temp_labels,