Updating payment graph

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>