Open-Source-Access-Control-Web-Interface/app/views/payments/index.html.erb

<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>
<%= link_to 'Manually', new_payment_path %> |
<%= link_to 'Batched CSV', paypal_csvs_path %> |
<%= link_to 'IPN', ipns_path %>
</p>


<table>
  <tr>
    <th>Payee</th>
    <th>User</th>
    <th>Member level</th>
    <th>Last Payment</th>
    <th>Amount</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @payments.each do |payment| %>
  <tr>
    <td><%= payment.user.payee unless payment.user.blank? %></td>
    <td><%= link_to payment.user.name, payment.user unless payment.user.blank? %></td>
    <td><%= payment.user.member_level_string unless payment.user.blank? %></td>
    <td><%= payment.date %></td>
    <td><%= payment.amount %></td>
    <td><%= link_to 'Details', payment %></td>
    <td><%= link_to 'Edit', edit_payment_path(payment) %></td>
  </tr>
<% end %>
</table>