From 5acb3cd272ffb6c473bab40b935e0622b2671317 Mon Sep 17 00:00:00 2001
From: Will Bradley <bradley.will@gmail.com>
Date: Sat, 28 Sep 2013 03:33:36 -0700
Subject: [PATCH] Updating payment graph

---
 app/controllers/payments_controller.rb |  14 ++--
 app/views/payments/index.html.erb      | 111 +++++++++++++------------
 config/routes.rb                       |   1 -
 3 files changed, 64 insertions(+), 62 deletions(-)

diff --git a/app/controllers/payments_controller.rb b/app/controllers/payments_controller.rb
index dd50979..a25f31f 100644
--- a/app/controllers/payments_controller.rb
+++ b/app/controllers/payments_controller.rb
@@ -16,6 +16,10 @@ class PaymentsController < ApplicationController
   # GET /payments.json
   def index
     @payments = @payments.order("date DESC")
+    @graph = { :members => chart("members"), 
+      :total => chart("total"), 
+      :basic => chart("basic"), 
+      :associate => chart("associate")}
 
     respond_to do |format|
       format.html # index.html.erb
@@ -23,8 +27,9 @@ class PaymentsController < ApplicationController
     end
   end
 
-  def chart
-    chart_name = params[:name] || "total"
+  # Private method for index charts
+  def chart name
+    chart_name = name || "total"
     if chart_name == "total"
       chart_type = [25, 50, 100]
     elsif chart_name == "members"
@@ -58,10 +63,7 @@ class PaymentsController < ApplicationController
       end
     end
 
-    respond_to do |format|
-      format.html # index.html.erb
-      format.json { render :json => @payments_by_month }
-    end
+    return @payments_by_month
   end
 
   def amount_or_level p
diff --git a/app/views/payments/index.html.erb b/app/views/payments/index.html.erb
index aee18ae..5b92755 100644
--- a/app/views/payments/index.html.erb
+++ b/app/views/payments/index.html.erb
@@ -1,6 +1,6 @@
 <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 src="http://code.highcharts.com/highcharts.js"></script>
 <script type="text/javascript">
 $(function() {
 
@@ -14,64 +14,65 @@ $(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: {
+  $('#graph').highcharts({
+      chart: {
+          type: 'area'
+      },
+      title: null,
+      xAxis: {
+          type: 'datetime'
+      },
+      yAxis : [{ // Primary yAxis
+        title : {
+          text: "Income"
         },
-
-        rangeSelector: {
-            selected: 1
+        labels: {
+          format: '${value}'
+        }
+      }, { // Secondary yAxis
+        title : {
+          text: "Members"
         },
-
-        yAxis: {
-          labels: {
-            formatter: function() {
-              return '$' + this.value;
-            }
-          },
-          plotLines: [{
-            value: 0,
-            width: 2,
-            color: 'silver'
-          }]
+        labels: {
+          format: '{value}'
         },
-        
+        opposite: true
+      }],
+      tooltip: {
+          shared: true,
+          xDateFormat: '%B %Y'
+      },
+      plotOptions: {
+          area: {
+              stacking: 'normal',
+              lineColor: '#666666',
+              lineWidth: 1,
+              marker: {
+                  lineWidth: 1,
+                  lineColor: '#666666'
+              }
+          }
+      },
+      series: [{
+        name: 'Basic',
+        data: <%= @graph[:basic].to_json %>,
         tooltip: {
-          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
-          valueDecimals: 0
-        },
-        
-        series: seriesOptions
-    });
-  }
+          valuePrefix: '$'
+        }
+      }, {
+        name: 'Associate',
+        data: <%= @graph[:associate].to_json %>,
+        tooltip: {
+          valuePrefix: '$'
+        }
+      }, {
+        yAxis: 1,
+        type: 'spline',
+        name: 'Members',
+        data: <%= @graph[:members].to_json %>
+      }]
+  });
+    
 
 });
 </script>
diff --git a/config/routes.rb b/config/routes.rb
index e0b6672..5f0355f 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -7,7 +7,6 @@ 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