Commits

Robert Brewer  committed 1d2a32a

Modularized the charts and tables to make redrawing easier

  • Participants
  • Parent commits 281f5a4

Comments (0)

Files changed (4)

File flowrate/ui/accounts.html

             }
         }
 
-        var bc = drawAccountChart('Balances', balances, $('chart_div'));
-        var table = bc[0];
-        var chart = bc[1];
+        var table = make_table(balances);
+        draw_table(table, 'Balances');
 
         // Show transactions matching a clicked point or column (account set)
         function handle_select() {

File flowrate/ui/common.js

 
 //                                   CHART                                   //
 
-function drawAccountChart(title, data, element) {
-    // Draw a Google Chart onto the $chart_div element.
+var chart = null;
+var amount_formatter = null;
+function createAccountChart() {
+    chart = new google.visualization.ComboChart($('chart_div'));
+    amount_formatter = new google.visualization.NumberFormat(
+        {prefix: '$', negativeColor: 'red', negativeParens: true});
+}
+google.setOnLoadCallback(createAccountChart);
+
+function make_table(data) {
+    // Return a google.visualization.DataTable from the given data.
     // 
     // The 'data' argument MUST be an array of
     // (account set, dataset[, titlesuffix]) tuples.
     // 
     // If a titlesuffix is provided, it MUST be a string. It will be appended
     // to each column title.
-
     if (data.length <= 0) return;
 
     // Create the data table.
     table.addColumn('string', 'Account');
 
     // Add columns from our data
-    var series = {};
     for (var i = 0; i < data.length; i++) {
         var col = data[i];
 
         if (accountset.length > 1) {
             // Draw a line, label it with ids only
             var name = accountset.join(" + ");
-            series[i] = {"type": "line", "curveType": "function"};
         } else {
             // Draw bars, label it with id and name
             var a = accountset[0];
     }
 
     // For some reason, we have to do this after we add all the rows
-    var formatter = new google.visualization.NumberFormat(
-        {prefix: '$', negativeColor: 'red', negativeParens: true});
     for (var i = 0; i < data.length; i++) {
-        formatter.format(table, i + 1);
+        amount_formatter.format(table, i + 1);
     }
 
-    var width = dategroups.length * 75;
+    return table;
+}
+
+function draw_table(table, title) {
+    // Draw the given table on the chart div.
+    var width = table.getNumberOfRows() * 75;
     if (width < 600) { width = 600; }
     if (width > 1200) { width = 1200; }
+
+    var series = {};
+    for (i=0; i < table.getNumberOfColumns(); i++) {
+        if (table.getColumnLabel(i).indexOf('+') != -1) {
+            series[i - 1] = {"type": "line", "curveType": "function"};
+        }
+    }
+
     var options = {'title': title,
                    'width': width, 'height': 400,
                    'vAxis': {'minValue': 0},
                    'seriesType': "bars",
-                   'series': series
+                   'series': series,
+                   'animation': {'duration': 1000, 'easing': 'out'},
                    };
 
-    // Instantiate and draw our chart, passing in some options.
-    var chart = new google.visualization.ComboChart(element);
+    // Draw our chart, passing in some options.
     chart.draw(table, options);
-
-    return [table, chart];
 }
 

File flowrate/ui/flows.html

             }
         }
 
-        var bc = drawAccountChart('Budgets', budgets, $('chart_div'));
-        var table = bc[0];
-        var chart = bc[1];
+        var table = make_table(budgets);
+        draw_table(table, 'Budgets');
 
         // Show transactions matching a clicked point or column (account set)
         function handle_select() {

File flowrate/ui/transactions.html

 function drawChart() {
     if (activity.length == 0) return;
 
-    var ac = drawAccountChart('Activity', activity, $('chart_div'));
-    var table = ac[0];
-    var chart = ac[1];
+    var table = make_table(activity);
+    draw_table(table, 'Activity');
 
     // Highlight rows matching a clicked point or column (account set)
     function handle_select() {