Fix issue #37 - Replace CSS Graph plugin with flot

app/helpers/reports_helper.rb

@@ -40,4 +40,39 @@ def percent_of_clinic(number_of_patients, total)
     percent = (number_of_patients.to_f / total.to_f) * 100.0
     sprintf('%.2f', percent)
   end
+
+  def bar_graph(name, data_series=[], div_options={}, graph_options={})
+    output = ""
+
+    div_options.merge!({ :id => name })
+    output << content_tag(:div, "", div_options)
+    output << javascript_tag(:defer => 'defer') do
+      <<-JS_OUTPUT
+      var placeholder = $('\##{ name }');
+      var data = #{ bar_graph_data(data_series) };
+      var options = #{ bar_graph_options(data_series) };
+      var plot = $.plot(placeholder, data, options);
+      JS_OUTPUT
+    end
+  end
+
+  def bar_graph_data(original_data)
+    data_series = original_data.each_with_index.map {|s, i| [ [ i, s[1] ] ] }
+    data_series.to_json
+  end
+
+  def bar_graph_options(original_data)
+    {
+      :bars => { :show => true, :align => :center, :barWidth => 0.6 },
+      :valueLabels => { :show => true },
+      :xaxis => {
+        :min => -0.6,
+        :max => original_data.count - 0.4,
+        :ticks => original_data.each_with_index.map {|data, i| [i, data[0]] }
+      },
+      :yaxis => { :minTickSize => 1, :tickDecimals => 0 },
+      :grid => { :tickColor => "#ffffff" }
+    }.to_json
+  end
+
 end

app/views/admin/reports/treatment_area_distribution.html.haml

@@ -13,7 +13,9 @@
       = submit_tag "Refresh"
 
 
-= bar_graph @current_capacity, :width => 845
+= raw bar_graph "treatment_area_graph", 
+                @current_capacity,
+                { :style => "width:845px;height:200px" }
 
 %p
   = link_to "Back", admin_reports_path, :class => "back"

app/views/layouts/application.html.haml

@@ -7,9 +7,10 @@
 
     = javascript_include_tag :defaults, 'modalbox.js', 'application_old'
     = javascript_include_tag 'helpers'
+    = javascript_include_tag 'jquery', 'jquery.flot', 'jquery.flot.valuelabels'
 
     = stylesheet_link_tag 'default', :media => :screen
-    = stylesheet_link_tag 'modalbox', 'tabs'
+    = stylesheet_link_tag 'modalbox', 'tabs', 'plot'
 
     /Active Bar
     = javascript_include_tag 'jquery-1.5.1.min', 'activebar/activebar2.js'

public/javascripts/jquery.flot.valuelabels.js

@@ -0,0 +1,92 @@
+/**
+ * Value Labels Plugin for flot.
+ * http://leonardoeloy.github.com/flot-valuelabels
+ * http://wiki.github.com/leonardoeloy/flot-valuelabels/
+ *
+ * Using canvas.fillText instead of divs, which is better for printing - by Leonardo Eloy, March 2010.
+ * Tested with Flot 0.6 and JQuery 1.3.2.
+ *
+ * Original homepage: http://sites.google.com/site/petrsstuff/projects/flotvallab
+ * Released under the MIT license by Petr Blahos, December 2009.
+ */
+(function ($) {
+    var options = {
+        valueLabels: {
+	    show: false,
+            showAsHtml: false, // Set to true if you wanna switch back to DIV usage (you need plot.css for this)
+            showLastValue: false // Use this to show the label only for the last value in the series
+        }
+    };
+
+    function init(plot) {
+        plot.hooks.draw.push(function (plot, ctx) {
+	    if (!plot.getOptions().valueLabels.show) return;
+
+            var showLastValue = plot.getOptions().valueLabels.showLastValue;
+            var showAsHtml = plot.getOptions().valueLabels.showAsHtml;
+            var ctx = plot.getCanvas().getContext("2d");
+	    $.each(plot.getData(), function(ii, series) {
+                    // Workaround, since Flot doesn't set this value anymore
+                    series.seriesIndex = ii;
+		    if (showAsHtml) plot.getPlaceholder().find("#valueLabels"+ii).remove();
+		    var html = '<div id="valueLabels' + series.seriesIndex + '" class="valueLabels">';
+
+		    var last_val = null;
+		    var last_x = -1000;
+		    var last_y = -1000;
+		    for (var i = 0; i < series.data.length; ++i) {
+			if (series.data[i] == null || (showLastValue && i != series.data.length-1))  continue;
+
+			var x = series.data[i][0], y = series.data[i][1];
+			if (x < series.xaxis.min || x > series.xaxis.max || y < series.yaxis.min || y > series.yaxis.max)  continue;
+			var val = y;
+
+			if (series.valueLabelFunc) val = series.valueLabelFunc({ series: series, seriesIndex: ii, index: i });
+			val = ""+val;
+
+			if (val!=last_val || i==series.data.length-1) {
+				var xx = series.xaxis.p2c(x)+plot.getPlotOffset().left;
+				var yy = series.yaxis.p2c(y)-12+plot.getPlotOffset().top;
+				if (Math.abs(yy-last_y)>20 || last_x<xx) {
+					last_val = val;
+					last_x = xx + val.length*8;
+					last_y = yy;
+
+                                        if (!showAsHtml) {
+                                            // Little 5 px padding here helps the number to get
+                                            // closer to points
+                                            x_pos = xx;
+                                            y_pos = yy+6;
+
+                                            // If the value is on the top of the canvas, we need
+                                            // to push it down a little
+                                            if (yy <= 0) y_pos = 18;
+                                            // The same happens with the x axis
+                                            if (xx >= plot.width()) x_pos = plot.width();
+
+                                            ctx.fillText(val, x_pos, y_pos);                
+                                        } else {
+                                            var head = '<div style="left:' + xx + 'px;top:' + yy + 'px;" class="valueLabel';
+                                            var tail = '">' + val + '</div>';
+                                            html+= head + "Light" + tail + head + tail;
+                                        }
+				}
+			}
+		    }
+
+                    if (showAsHtml) {
+                        html+= "</div>";
+                        plot.getPlaceholder().append(html);
+                    }
+		});
+        });
+    }
+
+    $.plot.plugins.push({
+        init: init,
+        options: options,
+        name: 'valueLabels',
+        version: '1.1'
+    });
+})(jQuery);
+