First effort towards nice charts in the budgeting overviews.

app/assets/javascripts/budgets.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear in whatever order it 
+// gets included (e.g. say you have require_tree . then the code will appear after all the directories 
+// but before any files alphabetically greater than 'application.js' 
+//
+// The available directives right now are require, require_directory, and require_tree
+//
+//= require_tree highcharts
+//= require firefly/budgets

app/assets/javascripts/firefly/accounts.js

@@ -7,7 +7,7 @@ if($('#chart').length == 1) {
         var options = {
             chart: {
                 renderTo: 'chart',
-                type: 'line'
+                type: 'spline'
             },
 
             series: data.series,

app/assets/javascripts/firefly/budgets.js

@@ -0,0 +1,93 @@
+$(function () {
+    if ($('#chart').length == 1) {
+        chartType = $('#instr').data('type');
+
+
+
+        if(chartType == 'envelope') {
+            var envelopeId = $('#instr').data('envelope');
+            var URL = 'chart/budget/envelope/' + envelopeId;
+        }
+        if(chartType == 'no_envelope') {
+            var budgetId = $('#instr').data('budget');
+            var URL = 'chart/budget/'+budgetId+'/no_envelope';
+           }
+        if(chartType == 'session') {
+            var budgetId = $('#instr').data('budget');
+            var URL = 'chart/budget/'+budgetId+'/session';
+        }
+        if(chartType == 'default') {
+            var budgetId = $('#instr').data('budget');
+            var URL = 'chart/budget/'+budgetId+'/default';
+        }
+
+        // go do something with this URL.
+        $.getJSON(URL).success(function (data) {
+            var options = {
+                chart: {
+                    renderTo: 'chart',
+                },
+
+                series: data.series,
+                title: {
+                    text: data.chart_title
+                },
+                yAxis: [{ // Primary yAxis
+                    labels: {
+                        format: '€ {value}',
+                        style: {
+                            color: Highcharts.getOptions().colors[1]
+                        }
+                    }
+                }, { // Secondary yAxis
+                    title: {
+                        style: {
+                            color: Highcharts.getOptions().colors[0]
+                        }
+                    },
+                    opposite: true
+                }],
+                subtitle: {
+                    text: data.subtitle,
+                    useHTML: true
+                },
+
+                xAxis: {
+                    floor: 0,
+                    type: 'datetime',
+                    dateTimeLabelFormats: {
+                        day: '%e %b',
+                        year: '%b'
+                    },
+                    title: {
+                        text: 'Date'
+                    }
+                },
+                plotOptions: {
+                    line: {
+                        shadow: true
+                    },
+                    series: {
+                        cursor: 'pointer',
+                        negativeColor: '#FF0000',
+                        threshold: 0,
+                        lineWidth: 1,
+                        marker: {
+                            radius: 2
+                        },
+                    }
+                },
+                credits: {
+                    enabled: false
+                }
+            };
+            $('#chart').highcharts(options);
+
+
+
+        });
+
+    }
+
+
+});