_profit_and_loss.html.haml

%div
  .content-title
    %h2.secondary Profit Over Last 3 Months
  .widget_container
    #no_data_pnl
      %div
        %div{ :style => "margin-left: 120px;"}
          %h3
            You have no transactions in Outright.
          %p
            Discover how much money is coming in and going out... 
          %p
            = link_to_company_importer_setup "Add an Account", :class => "button primary"

    #pnl_chart{ :style =>  "width: 100%" }
      %div{:style => "padding-left: 15px;"}
        #income_expenses
          %div.legend_container
            %div.legend.income
              %p.icon
                 
              %p Income: 
            %div.legend.expense
              %p.icon
                 
              %p Expense: 
      .clear
        
      #pnl_chart_render{ :style => "width: 600px; height: 260px; margin-left: 20px" }
        #cash_changes
        %div{ :style => "clear: both" }
        /  red AA4643
        / green 339900
        :javascript
          $(document).ready(function() {
            var now = new Date();
        
            var pnl_chart = new or.chart.Column('pnl_chart_render', {
              chartLoaded: function(highChart){
                this.loadDataViaAjax({
                  chart: highChart,
                  url: '/report/profit_and_loss.json',
                  endDate: now,
                  period: "3 month",
                  complete: function(json){
                    if (json.data && json.data.length > 0) {
                      highChart.options.orChart.options.json = json
                  
                      for (var i = 0; i < json.data.length; i++) {
                        if (json.data[i].name == "EXPENSE") {
                          json.data[i].color = "#AA4643"
                        } else if (json.data[i].name == "INCOME") {
                          json.data[i].color = "#339900"
                        }
                        
                        var originalName
                        for(var j = 0; j < json.data[i].data.length; j++) {
                          var name = json.data[i].name.split(" ")
                          originalName = name[0]
                          var newValue = parseFloat(name[1] || 0) + parseFloat(json.data[i].data[j])
                          json.data[i].name = name[0] + " "+ newValue
                        }
                        
                        var name = json.data[i].name.split(" ")
                        json.data[i].name = name[0] + ": " + or.util.Formatter.currency(parseFloat(name[1]))
                        
                        var capitalizedName = json.data[i].name.toLowerCase().charAt(0).toUpperCase() + json.data[i].name.toLowerCase().slice(1);
                        $('.legend_container .' + originalName.toLowerCase() + ' p').last().text(capitalizedName)
                        highChart.addSeries(json.data[i], false)
                      }
                  
                      highChart.xAxis[0].setCategories(json.intervals)
                      highChart.redraw()
                    } else {
                      $('#no_data_pnl').show()
                      $('#income_expenses').hide()
                    }
                  }
                })
              },
              highChartOptions: {
                chart: {
                  margin: [30, 30, 30, 75]
                },
                yAxis: {
                  labels: {
                    formatter: function(){
                      return or.util.Formatter.trimCurrency(this.value.toString())
                    }
                  }
                }, 
                tooltip: {
                  formatter: function() {
                    return ''+ this.x +': '+ or.util.Formatter.currency(this.y);
                  }
                },

                plotOptions: {
                  series: {
                    cursor: 'pointer',
                    point: {
                      events: {
                        click: function(event) {
                          var datum = this.series.data[this.x];
                          debugger;
                          //location.href = this.options.url;
                        }
                      }
                    }
                  }
                }
              }
            });
            pnl_chart.render();
          });