Adding payment graph

app/controllers/payments_controller.rb

@@ -16,32 +16,66 @@ class PaymentsController < ApplicationController
   # GET /payments.json
   def index
     @payments = @payments.order("date DESC")
-    payment_months = @payments.group_by{ |p| p.date.beginning_of_month }
+
+    respond_to do |format|
+      format.html # index.html.erb
+      format.json { render :json => @payments }
+    end
+  end
+
+  def chart
+    chart_name = params[:name] || "total"
+    if chart_name == "total"
+      chart_type = [25, 50, 100]
+    elsif chart_name == "members"
+      chart_type = [25, 50, 100]
+    elsif chart_name == "basic"
+      chart_type = [50]
+    elsif chart_name == "associate"
+      chart_type = [25]
+    else
+      chart_type = [] 
+    end
+
+    payment_months = @payments.sort_by(&:date).group_by{ |p| p.date.beginning_of_month }
     @payments_by_month = []
     payment_months.each do |month|
       # Only grab the last year from today
       if month.first > (Date.today - 1.year) && month.first < Date.today
         # Calculate sum of amounts for each month and store at end of month array
-        @payments_by_month << {:month => month.first, :sum => month.last.sum{|p| 
+        @payments_by_month << [month.first.to_time.to_i*1000, month.last.sum{|p| 
-          if p.amount
+          amount = amount_or_level(p)
-            p.amount.to_i
+          if chart_type.include?(amount)
+            if chart_name == "members"
+              1 # Output 1 to count members
             else
-            if p.user
+              amount # Output dollars to count amount
-              Rails.logger.info p.user.member_level
+            end
-              p.user.member_level.to_i
           else
-              Rails.logger.info p.inspect
-              Rails.logger.info p.user.inspect
             0
           end
-          end
+        }]
-        }}
       end
     end
 
     respond_to do |format|
       format.html # index.html.erb
-      format.json { render :json => @payments }
+      format.json { render :json => @payments_by_month }
+    end
+  end
+
+  def amount_or_level p
+    if p.amount
+      return p.amount.to_i
+    else
+      if p.user
+        Rails.logger.info p.user.member_level
+        return p.user.member_level.to_i
+      else
+        Rails.logger.info p.inspect
+        Rails.logger.info p.user.inspect
+        return 0
+      end
     end 
   end
 

app/views/payments/index.html.erb

@@ -1,4 +1,85 @@
-<h1>Listing payments</h1>
+<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+<script src="highstock/js/highstock.js"></script>
+<script type="text/javascript">
+$(function() {
+
+  $( "#graph" ).dialog({
+    autoOpen: false,
+    height: 325,
+    width: 525,
+    modal: true,
+  });
+  $( "#graph-button" ).click(function() {
+    $( "#graph" ).dialog( "open" );
+  });
+
+  var seriesOptions = [],
+    yAxisOptions = [],
+    seriesCounter = 0,
+    names = ['Members', 'Associate', 'Basic', 'Total'],
+    colors = Highcharts.getOptions().colors;
+
+  $.each(names, function(i, name) {
+
+    $.getJSON('/payments/chart.json?name='+ name.toLowerCase(), function(data) {
+
+      seriesOptions[i] = {
+        name: name,
+        data: data
+      };
+
+      // As we're loading the data asynchronously, we don't know what order it will arrive. So
+      // we keep a counter and create the chart when all the data is loaded.
+      seriesCounter++;
+
+      if (seriesCounter == names.length) {
+        createChart();
+      }
+    });
+  });
+
+
+
+  // create the chart when all data is loaded
+  function createChart() {
+    $('#graph').highcharts('StockChart', {
+        chart: {
+        },
+
+        rangeSelector: {
+            selected: 1
+        },
+
+        yAxis: {
+          labels: {
+            formatter: function() {
+              return '$' + this.value;
+            }
+          },
+          plotLines: [{
+            value: 0,
+            width: 2,
+            color: 'silver'
+          }]
+        },
+        
+        tooltip: {
+          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
+          valueDecimals: 0
+        },
+        
+        series: seriesOptions
+    });
+  }
+
+});
+</script>
+
+<div id="graph" title="Payments by Month" style="height: 250px; width: 500px; float: right;"></div>
+
+
+<h1>Listing payments <button id="graph-button">View Graph</button></h1>
 
 <p>
 <b>Create Payments:</b>
@@ -7,14 +88,6 @@
 <%= link_to 'IPN', ipns_path %>
 </p>
 
-<p>
-<h3>Payments by Month</h3>
-<dl>
-<% @payments_by_month.each do |month| %>
-  <dt><%= month[:month] %></dt>
-  <dd><%= month[:sum] %></dd>
-<% end %>
-</dl>
 
 <table>
   <tr>

config/routes.rb

@@ -7,6 +7,7 @@ Dooraccess::Application.routes.draw do
   resources :paypal_csvs
   match 'paypal_csvs/:id/link' => 'paypal_csvs#link', :as => :link_paypal_csv
 
+  match 'payments/chart' => 'payments#chart', :as => :chart_payments
   resources :payments
 
   resources :user_certifications