diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
index 6afbf26819b38bee2ec12697a67bee7341156345..ad67a830060f8ebee52e1684c92e2d7dc6cbfd56 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/DefaultCharts.java
@@ -58,9 +58,9 @@ public class DefaultCharts
getChartFromFile("charts/AverageTransactionAmountPerCategoryBar.js"),
ChartType.DEFAULT, 3, ChartDisplayType.BAR, ChartGroupType.NONE, "averageTransactionAmountPerCategory.png");
- private static final Chart CHART_AVERAGE_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR = new Chart("charts.default.averageIncomesAndExpendituresPerYearBar",
- getChartFromFile("charts/AverageIncomesAndExpendituresPerYearBar.js"),
- ChartType.DEFAULT, 4, ChartDisplayType.BAR, ChartGroupType.YEAR, "averageIncomesAndExpendituresPerYearBar.png");
+ private static final Chart CHART_AVERAGE_MONTHLY_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR = new Chart("charts.default.averageMonthlyIncomesAndExpendituresPerYearBar",
+ getChartFromFile("charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js"),
+ ChartType.DEFAULT, 9, ChartDisplayType.BAR, ChartGroupType.YEAR, "averageMonthlyIncomesAndExpendituresPerYearBar.png");
private DefaultCharts()
{
@@ -79,7 +79,7 @@ public class DefaultCharts
charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR);
charts.add(CHART_INCOMES_AND_EXPENDITURES_PER_YEAR_BY_CATEGORIES);
charts.add(CHART_AVERAGE_TRANSACTION_AMOUNT_PER_CATEGORY);
- charts.add(CHART_AVERAGE_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR);
+ charts.add(CHART_AVERAGE_MONTHLY_INCOMES_AND_EXPENDITURES_PER_YEAR_BAR);
return charts;
}
diff --git a/src/main/resources/charts/AverageIncomesAndExpendituresPerYearBar.js b/src/main/resources/charts/AverageIncomesAndExpendituresPerYearBar.js
deleted file mode 100644
index df534b8ca493001c6ac8c86fcd43546e1a4f9066..0000000000000000000000000000000000000000
--- a/src/main/resources/charts/AverageIncomesAndExpendituresPerYearBar.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/* This list will be dynamically filled with all the transactions between
- * the start and and date you select on the "Show Chart" page
- * and filtered according to your specified filter.
- * An example entry for this list and tutorial about how to create custom charts ca be found in the BudgetMaster wiki:
- * https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts
- */
-var transactionData = [];
-
-// Note: All variables starting with "localized" are only available inside default charts.
-moment.locale(localizedLocale);
-
-var dates = [];
-var incomes = [];
-var incomeSums = [];
-var numberOfIncomes = [];
-var numberOfExpenditures = [];
-var expenditureSums = [];
-
-transactionData = transactionData.reverse();
-
-for(var i = 0; i < transactionData.length; i++)
-{
- var transaction = transactionData[i];
-
- // create new sums if year is not already in list
- var date = moment(transaction.date).startOf('year').format('YYYY');
- if(!dates.includes(date))
- {
- dates.push(date);
- incomeSums.push(0);
- numberOfIncomes.push(0);
- expenditureSums.push(0);
- numberOfExpenditures.push(0);
- }
-
- // add to income or expenditure sum
- var amount = transaction.amount;
- if(amount > 0)
- {
- var lastIndex = incomeSums.length - 1;
- incomeSums[lastIndex] = incomeSums[lastIndex] + amount;
- numberOfIncomes[lastIndex] = numberOfIncomes[lastIndex] + 1;
- }
- else
- {
- var lastIndex = expenditureSums.length - 1;
- expenditureSums[lastIndex] = expenditureSums[lastIndex] + Math.abs(amount);
- numberOfExpenditures[lastIndex] = numberOfExpenditures[lastIndex] + 1;
- }
-}
-
-var incomeAverages = [];
-var expenditureAverages = [];
-
-for(let i = 0; i < dates.length; i++)
-{
- var currentIncomeAverage = (incomeSums[i] / 100) / numberOfIncomes[i];
- incomeAverages.push(currentIncomeAverage);
-
- var currentExpenditureAverage = (expenditureSums[i] / 100) / numberOfExpenditures[i];
- expenditureAverages.push(currentExpenditureAverage);
-}
-
-// Prepare your chart settings here (mandatory)
-var plotlyData = [
- {
- x: dates,
- y: incomeAverages,
- type: 'bar',
- name: localizedData['traceName1']
- },
- {
- x: dates,
- y: expenditureAverages,
- type: 'bar',
- name: localizedData['traceName2']
- }
-];
-
-// Add your Plotly layout settings here (optional)
-var plotlyLayout = {
- title: {
- text: localizedTitle
- },
- yaxis: {
- title: localizedData['axisY'] + localizedCurrency,
- rangemode: 'tozero',
- tickformat: '.2f',
- showline: true
- },
- xaxis: {
-
- }
-};
-
-// Add your Plotly configuration settings here (optional)
-var plotlyConfig = {
- showSendToCloud: false,
- displaylogo: false,
- showLink: false,
- responsive: true,
- displayModeBar: true,
- toImageButtonOptions: {
- format: 'png',
- filename: 'BudgetMaster_chart_export',
- height: 1080,
- width: 1920,
- }
-};
-
-// Don't touch this line
-Plotly.newPlot("containerID", plotlyData, plotlyLayout, plotlyConfig);
\ No newline at end of file
diff --git a/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js b/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..31314af2ccdcb0eaa6f246936cd893e639f95eff
--- /dev/null
+++ b/src/main/resources/charts/AverageMonthlyIncomesAndExpendituresPerYearBar.js
@@ -0,0 +1,134 @@
+/* This list will be dynamically filled with all the transactions between
+ * the start and and date you select on the "Show Chart" page
+ * and filtered according to your specified filter.
+ * An example entry for this list and tutorial about how to create custom charts ca be found in the BudgetMaster wiki:
+ * https://github.com/deadlocker8/BudgetMaster/wiki/How-to-create-custom-charts
+ */
+var transactionData = [];
+
+// Note: All variables starting with "localized" are only available inside default charts.
+moment.locale(localizedLocale);
+
+var years = [];
+var transactionsPerYear = [];
+
+
+transactionData = transactionData.reverse();
+
+// group transactions by years
+for(var i = 0; i < transactionData.length; i++)
+{
+ var transaction = transactionData[i];
+
+ // create new sums if year is not already in list
+ var date = moment(transaction.date).startOf('year').format('YYYY');
+
+ if(!years.includes(date))
+ {
+ years.push(date);
+ transactionsPerYear.push([]);
+ }
+
+ var index = years.indexOf(date);
+
+ transactionsPerYear[index].push(transaction);
+}
+
+
+var incomeAveragesPerYear = [];
+var incomeAveragesHoverTexts = [];
+var expenditureAveragesPerYear = [];
+var expenditureAveragesHoverTexts = [];
+
+for(let i = 0; i < years.length; i++)
+{
+ var year = years[i];
+ var transactionsOfYear = transactionsPerYear[i];
+
+ var incomeSum = 0;
+ var expenditureSum = 0;
+
+ for(let j = 0; j < transactionsOfYear.length; j++)
+ {
+ var currentTransaction = transactionsOfYear[j];
+ var month = moment(currentTransaction.date).startOf('month').format('M') - 1;
+
+ var amount = currentTransaction.amount;
+ if(amount > 0)
+ {
+ incomeSum = incomeSum + amount;
+ }
+ else
+ {
+ expenditureSum = expenditureSum + Math.abs(amount);
+ }
+ }
+
+ var currentIncomeAverage = (incomeSum / 100) / 12;
+ incomeAveragesPerYear.push(currentIncomeAverage);
+ incomeAveragesHoverTexts.push(prepareHoverText(currentIncomeAverage))
+
+ var currentExpenditureAverage = (expenditureSum / 100) / 12;
+ expenditureAveragesPerYear.push(currentExpenditureAverage);
+ expenditureAveragesHoverTexts.push(prepareHoverText(currentExpenditureAverage))
+}
+
+// Prepare your chart settings here (mandatory)
+var plotlyData = [
+ {
+ x: years,
+ y: incomeAveragesPerYear,
+ type: 'bar',
+ name: localizedData['traceName1'],
+ hoverinfo: 'text',
+ hovertext: incomeAveragesHoverTexts,
+ },
+ {
+ x: years,
+ y: expenditureAveragesPerYear,
+ type: 'bar',
+ name: localizedData['traceName2'],
+ hoverinfo: 'text',
+ hovertext: expenditureAveragesHoverTexts,
+ }
+];
+
+// Add your Plotly layout settings here (optional)
+var plotlyLayout = {
+ title: {
+ text: localizedTitle
+ },
+ yaxis: {
+ title: localizedData['axisY'] + localizedCurrency,
+ rangemode: 'tozero',
+ tickformat: '.2f',
+ showline: true
+ },
+ xaxis: {
+
+ }
+};
+
+// Add your Plotly configuration settings here (optional)
+var plotlyConfig = {
+ showSendToCloud: false,
+ displaylogo: false,
+ showLink: false,
+ responsive: true,
+ displayModeBar: true,
+ toImageButtonOptions: {
+ format: 'png',
+ filename: 'BudgetMaster_chart_export',
+ height: 1080,
+ width: 1920,
+ }
+};
+
+// Don't touch this line
+Plotly.newPlot("containerID", plotlyData, plotlyLayout, plotlyConfig);
+
+
+function prepareHoverText(value)
+{
+ return value.toFixed(1) + ' ' + localizedCurrency;
+}
\ No newline at end of file
diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 07a048892adea3ed68a710a7942b1d3d9ee03f92..9652e9eeb23d601c4befe751c2d129eb8beeff79 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -558,8 +558,8 @@ charts.default.incomesAndExpendituresPerYearByCategories=Eingaben/Ausgaben nach
charts.default.incomesAndExpendituresPerYearByCategories.localization='{"label1": "Ausgaben", "label2": "Einnahmen"'}
charts.default.averageTransactionAmountPerCategory=Durchschnittlicher Transaktionsbetrag pro Kategorie
charts.default.averageTransactionAmountPerCategory.localization='{"label1": "Durchschnittlicher Transaktionsbetrag in"'}
-charts.default.averageIncomesAndExpendituresPerYearBar=Durchschnittliche Einnahmen/Ausgaben
-charts.default.averageIncomesAndExpendituresPerYearBar.localization='{"traceName1": "Einnahmen", "traceName2": "Ausgaben"', "axisY": "Durchschnittlicher Betrag in"'}
+charts.default.averageMonthlyIncomesAndExpendituresPerYearBar=Durchschnittliche monatliche Einnahmen/Ausgaben
+charts.default.averageMonthlyIncomesAndExpendituresPerYearBar.localization='{"traceName1": "Einnahmen", "traceName2": "Ausgaben"', "axisY": "Durchschnittlicher monatlicher Betrag in"'}
chart.new.label.name=Name
chart.new.label.script=Script
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index b9bb2c5b3334cd0397c4407b70d235a36bd6b601..69067d821b8cad17f0cd26cdc8d7d8aa4003dd83 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -558,8 +558,8 @@ charts.default.incomesAndExpendituresPerYearByCategories=Incomes/Expenditures by
charts.default.incomesAndExpendituresPerYearByCategories.localization='{"label1": "Expenditures", "label2": "Incomes"'}
charts.default.averageTransactionAmountPerCategory=Average transaction amount per category
charts.default.averageTransactionAmountPerCategory.localization='{"label1": "Average transaction amount in"'}
-charts.default.averageIncomesAndExpendituresPerYearBar=Average incomes/expenditures
-charts.default.averageIncomesAndExpendituresPerYearBar.localization='{"traceName1": "Incomes", "traceName2": "Expenditures"', "axisY": "Average amount in"'}
+charts.default.averageMonthlyIncomesAndExpendituresPerYearBar=Average monthly incomes/expenditures
+charts.default.averageMonthlyIncomesAndExpendituresPerYearBar.localization='{"traceName1": "Incomes", "traceName2": "Expenditures"', "axisY": "Average monthly amount in"'}
chart.new.label.name=Name
chart.new.label.script=Script
diff --git a/src/main/resources/static/images/charts/averageIncomesAndExpendituresPerYearBar.png b/src/main/resources/static/images/charts/averageIncomesAndExpendituresPerYearBar.png
deleted file mode 100644
index fa26b0d9e14df12726e3e7dffef3f82be0a1b568..0000000000000000000000000000000000000000
Binary files a/src/main/resources/static/images/charts/averageIncomesAndExpendituresPerYearBar.png and /dev/null differ
diff --git a/src/main/resources/static/images/charts/averageMonthlyIncomesAndExpendituresPerYearBar.png b/src/main/resources/static/images/charts/averageMonthlyIncomesAndExpendituresPerYearBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..17836f6333821b2511ed4f420b165a46585019e4
Binary files /dev/null and b/src/main/resources/static/images/charts/averageMonthlyIncomesAndExpendituresPerYearBar.png differ