Updating payment graph

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
+  # Private method for index charts
-    chart_name = params[:name] || "total"
+  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|
+    return @payments_by_month
-      format.html # index.html.erb
-      format.json { render :json => @payments_by_month }
-    end
   end
 
   def amount_or_level p

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,65 +14,66 @@ $(function() {
     $( "#graph" ).dialog( "open" );
   });
 
-  var seriesOptions = [],
+  $('#graph').highcharts({
-    yAxisOptions = [],
+      chart: {
-    seriesCounter = 0,
+          type: 'area'
-    names = ['Members', 'Associate', 'Basic', 'Total'],
+      },
-    colors = Highcharts.getOptions().colors;
+      title: null,
-
+      xAxis: {
-  $.each(names, function(i, name) {
+          type: 'datetime'
-
+      },
-    $.getJSON('/payments/chart.json?name='+ name.toLowerCase(), function(data) {
+      yAxis : [{ // Primary yAxis
-
+        title : {
-      seriesOptions[i] = {
+          text: "Income"
-        name: name,
+        },
-        data: data
+        labels: {
-      };
+          format: '${value}'
-
+        }
-      // As we're loading the data asynchronously, we don't know what order it will arrive. So
+      }, { // Secondary yAxis
-      // we keep a counter and create the chart when all the data is loaded.
+        title : {
-      seriesCounter++;
+          text: "Members"
-
+        },
-      if (seriesCounter == names.length) {
+        labels: {
-        createChart();
+          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: {
+          valuePrefix: '$'
+        }
+      }, {
+        name: 'Associate',
+        data: <%= @graph[:associate].to_json %>,
+        tooltip: {
+          valuePrefix: '$'
+        }
+      }, {
+        yAxis: 1,
+        type: 'spline',
+        name: 'Members',
+        data: <%= @graph[:members].to_json %>
+      }]
   });
     
 
-
-  // 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>
 

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