diff --git a/src/html/js/entries.js b/src/html/js/entries.js
index 0c7d3d9..2145580 100644
--- a/src/html/js/entries.js
+++ b/src/html/js/entries.js
@@ -341,97 +341,120 @@ var ListViewModel = function() {
};
};
+// Function to draw the sold evolution chart.
drawChart = function(entries, element) {
- // clear previous chart
+ // Clear previous chart
$(element).html("");
if(entries && entries.length > 0) {
- var chartValues = [[], []];
-
- chartValues[0] = entries;
-
+ // Prepare for today vertical line.
var today = new Date();
today.setHours(0);
today.setMinutes(0);
+ // Find first and last days to set limits of the x axis.
var day = 24 * 60 * 60 * 1000;
-
var firstDate = new Date(Date.parse(entries[0][0]).valueOf() - day).format('yyyy-mm-dd');
var lastDate = new Date(Date.parse(entries[entries.length -1][0]).valueOf() + day).format('yyyy-mm-dd');
- // plot chart
- window.chart = $.jqplot(element.id, chartValues, {
+ // Plot chart, and store it in a window parameter for resize callback (need to be done better than it...)
+ window.chart = $.jqplot(element.id, [entries], {
+ // Title of the chart
title: "Évolution du solde",
axes:{
+ // Parameters for the date axis
xaxis:{
autoscale: true,
+
+ // Date rendere for this axis
renderer:$.jqplot.DateAxisRenderer,
+
+ // Limits
min: firstDate,
max: lastDate,
- tickOptions: {formatString: "%F"}
+
+ // Tick options
+ tickOptions: {
+ // Format date for x axis.
+ formatString: "%F"
+ }
},
+ // Parameters for the value axis
yaxis: {
autoscale: true,
}
},
+
+ // Highlighter parameters
highlighter: {
- show:true,
+ show: true,
yvalues: 4,
- formatString:'
date: | %s |
open: | %s |
hi: | %s |
low: | %s |
close: | %s |
'
+ formatString: 'date: | %s |
open: | %s |
hi: | %s |
low: | %s |
close: | %s |
'
},
+ // Series parameters
series: [{
+ // We use the OHLC (open, high, low, close) rendered.
renderer:$.jqplot.OHLCRenderer,
color: "blue",
- lineWidth: 3,
- rendererOptions:{}
}],
+
+ // To display horizontal (0) and vertical (today) lines
canvasOverlay: {
show: true,
- objects: [{
- dashedHorizontalLine: {
+ objects: [
+ // Red horizontal line for 0 limit
+ {dashedHorizontalLine: {
name: "zero",
y: 0,
lineWidth: 1,
color: "red",
shadow: false
}},
+ // Gray vertical line for today
{ dashedVerticalLine: {
name: "today",
x: today,
lineWidth: 1,
color: "gray",
shadow: false
- }}]
+ }}
+ ]
}
});
} else {
+ // Reset chart to null to avoid redraw of a non existing chart in resize callback.
window.chart = null;
}
};
+// Function to draw the expense category pie chart.
drawPieChart = function(entries, element) {
- // clear previous chart
+ // Clear previous chart
$(element).html("");
if(entries && entries.length > 0) {
- var chartValues = [[]];
-
- chartValues[0] = entries;
-
- // plot chart
- window.pieChart = $.jqplot(element.id, chartValues, {
+ // Plot chart, and store it in a window parameter for resize callback (need to be done better than it...)
+ window.pieChart = $.jqplot(element.id, [entries], {
+ // Title of the chart
title: "Dépenses",
+
+ // Series parameters.
seriesDefaults: {
+ // Pie chart renderer
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
+
+ // Legend parameters.
legend: {
show: true,
location: 'e'
},
+
+ // Highlighter parameters;
highlighter: {
show: true,
formatString:'%s: %s',
@@ -440,10 +463,12 @@ drawPieChart = function(entries, element) {
}
});
} else {
+ // Reset chart to null to avoid redraw of a non existing chart in resize callback.
window.pieChart = null;
}
};
+// Chart binding to redraw the chart on entries update.
ko.bindingHandlers.chart = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// empty - left as placeholder if needed later
@@ -453,12 +478,12 @@ ko.bindingHandlers.chart = {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
- //var entries = dataSource ? unwrap(dataSource) : null;
var entries = dataSource ? unwrap(dataSource) : null;
drawChart(entries, element);
}
};
+// Pie chart binding to redraw expense chart on entries update.
ko.bindingHandlers.pieChart = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// empty - left as placeholder if needed later
@@ -468,16 +493,17 @@ ko.bindingHandlers.pieChart = {
var unwrap = ko.utils.unwrapObservable;
var dataSource = valueAccessor();
- //var entries = dataSource ? unwrap(dataSource) : null;
var entries = dataSource ? unwrap(dataSource) : null;
drawPieChart(entries, element);
}
};
+// Default AJAX error handler.
$(document).ajaxError(function(event, xhr, settings) {
message("error", "Error.", xhr.statusText);
});
+// Resize callback.
$(window).resize(function() {
if(window.chart) {
window.chart.replot({resetAxes: true});
@@ -488,8 +514,10 @@ $(window).resize(function() {
}
});
+// ViewModal instanciation.
var viewModel = new ListViewModel();
ko.applyBindings(viewModel);
+// Load accounts after page initialization.
$(viewModel.loadAccounts);