You can download the application here (note: only works on Macs). For questions, click on the chat bubble on the lower left corner of the screen 🙂

Background

Compound rate calculation is relatively simple, but compound rate calculation combined with a fixed annual deposition/addition is much more difficult. Below is an formulation of compound rate calculation with a fixed annual deposition/addition:

It would be too time-consuming to go through the above calculation every time we decide how much to put into our savings accounts, pensions etc. However, without going through the exact calculation, it is very easy to underestimate the magnitude of our accumulations in the long run when interest is compounded. Hence, I developed the above simple application, with the hopes that the graphical and tabular information will be especially helpful in understanding the power of compound interest (with a fixed annual addition).

This application allows the user to input four variable inputs: the principle amount in the account, the annual deposition/contribution, the number of years elapsed, and the annual interest rate (compounded annually).

The application outputs three pieces of information:

• the total amount after the number of years elapsed
• a graph plotting total amount vs years elapsed (the graph also displays the total amount deposited for comparison with the total amount)
• a table containing below columns:
  • Year
  • Total Savings
  • Total Amount Deposited
  • Total Interest Gained
  • Total Savings as a ratio of Total Amount Deposited

Source Code

classdef InterestRate < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure                        matlab.ui.Figure
        GridLayout                      matlab.ui.container.GridLayout
        LeftPanel                       matlab.ui.container.Panel
        Panel                           matlab.ui.container.Panel
        PrincipalAmountEditFieldLabel   matlab.ui.control.Label
        PrincipalAmountEditField        matlab.ui.control.NumericEditField
        NumberofYearsElapsedEditFieldLabel  matlab.ui.control.Label
        NumberofYearsElapsedEditField   matlab.ui.control.NumericEditField
        YearlyAdditionFixedEditFieldLabel  matlab.ui.control.Label
        YearlyAdditionFixedEditField    matlab.ui.control.NumericEditField
        InterestRateEditFieldLabel      matlab.ui.control.Label
        InterestRateEditField           matlab.ui.control.NumericEditField
        CalculateTotalAmountafterNumbersofYearsElapsedButton  matlab.ui.control.Button
        Output                          matlab.ui.control.EditField
        InterestRateEditField_2Label_2  matlab.ui.control.Label
        UITable                         matlab.ui.control.Table
        RightPanel                      matlab.ui.container.Panel
        UIAxes                          matlab.ui.control.UIAxes
    end

    % Properties that correspond to apps with auto-reflow
    properties (Access = private)
        onePanelWidth = 576;
    end



    % Callbacks that handle component events
    methods (Access = private)

        % Button pushed function: 
        % CalculateTotalAmountafterNumbersofYearsElapsedButton
        function CalculateTotalAmountafterNumbersofYearsElapsedButtonPushed(app, event)
           
            % Naming Variables
           principal_amount = app.PrincipalAmountEditField.Value;
           
           yearly_addition = app.YearlyAdditionFixedEditField.Value;
           
           number_years = app.NumberofYearsElapsedEditField.Value;
           
           interest_rate = app.InterestRateEditField.Value;
           
            %% Computation
            total_amount=principal_amount;
            temp_matrix_zeros=zeros([1 number_years]);
            temp_matrix_zeros_2=zeros([1 number_years]);
            total_yearly_addition=principal_amount;
            
            for n=1:number_years
                total_amount=(yearly_addition+total_amount)*(1+interest_rate);
                temp_matrix_zeros(1,n)=total_amount;
                total_yearly_addition=yearly_addition+total_yearly_addition;
                temp_matrix_zeros_2(1,n)=total_yearly_addition;
            end
            
            app.Output.Value = string(total_amount);
            
            %% Displaying a graph of total amount vs year elapsed
            x_axis=1:number_years;
            plot(app.UIAxes,x_axis,temp_matrix_zeros,'r');
            hold (app.UIAxes,"on");
            plot(app.UIAxes,x_axis,temp_matrix_zeros_2,'k');
            hold (app.UIAxes,"off");
            legend(app.UIAxes,'Total Savings','Total Amount Deposited');
            
            %% Displaying further processed data in tabular format
            matrix=round([1:number_years;temp_matrix_zeros;temp_matrix_zeros_2;temp_matrix_zeros-temp_matrix_zeros_2]);
            matrix_2=temp_matrix_zeros./temp_matrix_zeros_2;
            matrix=vertcat(matrix,matrix_2);
            matrix=transpose(matrix);
            matrix=(array2table(matrix,'VariableNames',{'Year';'Total Savings'; 'Total Amount Deposited'; 'Total Interest Gained'; 'Total Savings As A Ratio of Total Amount Deposited'}));
            app.UITable.Data = matrix;
            app.UITable.ColumnName = matrix.Properties.VariableNames;
            format bank
           
        end

        % Changes arrangement of the app based on UIFigure width
        function updateAppLayout(app, event)
            currentFigureWidth = app.UIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 2x1 grid
                app.GridLayout.RowHeight = {502, 502};
                app.GridLayout.ColumnWidth = {'1x'};
                app.RightPanel.Layout.Row = 2;
                app.RightPanel.Layout.Column = 1;
            else
                % Change to a 1x2 grid
                app.GridLayout.RowHeight = {'1x'};
                app.GridLayout.ColumnWidth = {412, '1x'};
                app.RightPanel.Layout.Row = 1;
                app.RightPanel.Layout.Column = 2;
            end
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.AutoResizeChildren = 'off';
            app.UIFigure.Position = [100 100 886 502];
            app.UIFigure.Name = 'Interest Rate Calculation With Yearly Deposition (Compound Interest)';
            app.UIFigure.SizeChangedFcn = createCallbackFcn(app, @updateAppLayout, true);
            app.UIFigure.Scrollable = 'on';

            % Create GridLayout
            app.GridLayout = uigridlayout(app.UIFigure);
            app.GridLayout.ColumnWidth = {412, '1x'};
            app.GridLayout.RowHeight = {'1x'};
            app.GridLayout.ColumnSpacing = 0;
            app.GridLayout.RowSpacing = 0;
            app.GridLayout.Padding = [0 0 0 0];
            app.GridLayout.Scrollable = 'on';

            % Create LeftPanel
            app.LeftPanel = uipanel(app.GridLayout);
            app.LeftPanel.Layout.Row = 1;
            app.LeftPanel.Layout.Column = 1;

            % Create Panel
            app.Panel = uipanel(app.LeftPanel);
            app.Panel.TitlePosition = 'centertop';
            app.Panel.Scrollable = 'on';
            app.Panel.Position = [7 282 399 210];

            % Create PrincipalAmountEditFieldLabel
            app.PrincipalAmountEditFieldLabel = uilabel(app.Panel);
            app.PrincipalAmountEditFieldLabel.HorizontalAlignment = 'right';
            app.PrincipalAmountEditFieldLabel.Position = [14 178 97 22];
            app.PrincipalAmountEditFieldLabel.Text = 'Principal Amount';

            % Create PrincipalAmountEditField
            app.PrincipalAmountEditField = uieditfield(app.Panel, 'numeric');
            app.PrincipalAmountEditField.Limits = [0 Inf];
            app.PrincipalAmountEditField.ValueDisplayFormat = '%.0f';
            app.PrincipalAmountEditField.Position = [173 178 100 22];
            app.PrincipalAmountEditField.Value = 1000;

            % Create NumberofYearsElapsedEditFieldLabel
            app.NumberofYearsElapsedEditFieldLabel = uilabel(app.Panel);
            app.NumberofYearsElapsedEditFieldLabel.HorizontalAlignment = 'right';
            app.NumberofYearsElapsedEditFieldLabel.Position = [14 113 142 22];
            app.NumberofYearsElapsedEditFieldLabel.Text = 'Number of Years Elapsed';

            % Create NumberofYearsElapsedEditField
            app.NumberofYearsElapsedEditField = uieditfield(app.Panel, 'numeric');
            app.NumberofYearsElapsedEditField.Limits = [0 Inf];
            app.NumberofYearsElapsedEditField.RoundFractionalValues = 'on';
            app.NumberofYearsElapsedEditField.ValueDisplayFormat = '%.0f';
            app.NumberofYearsElapsedEditField.Position = [173 113 100 22];
            app.NumberofYearsElapsedEditField.Value = 20;

            % Create YearlyAdditionFixedEditFieldLabel
            app.YearlyAdditionFixedEditFieldLabel = uilabel(app.Panel);
            app.YearlyAdditionFixedEditFieldLabel.HorizontalAlignment = 'right';
            app.YearlyAdditionFixedEditFieldLabel.Position = [14 145 124 22];
            app.YearlyAdditionFixedEditFieldLabel.Text = 'Yearly Addition (Fixed)';

            % Create YearlyAdditionFixedEditField
            app.YearlyAdditionFixedEditField = uieditfield(app.Panel, 'numeric');
            app.YearlyAdditionFixedEditField.Limits = [0 Inf];
            app.YearlyAdditionFixedEditField.ValueDisplayFormat = '%.0f';
            app.YearlyAdditionFixedEditField.Position = [173 145 100 22];
            app.YearlyAdditionFixedEditField.Value = 1200;

            % Create InterestRateEditFieldLabel
            app.InterestRateEditFieldLabel = uilabel(app.Panel);
            app.InterestRateEditFieldLabel.HorizontalAlignment = 'right';
            app.InterestRateEditFieldLabel.Position = [14 81 89 22];
            app.InterestRateEditFieldLabel.Text = 'Interest Rate %';

            % Create InterestRateEditField
            app.InterestRateEditField = uieditfield(app.Panel, 'numeric');
            app.InterestRateEditField.Limits = [0 Inf];
            app.InterestRateEditField.Position = [173 81 100 22];
            app.InterestRateEditField.Value = 0.05;

            % Create CalculateTotalAmountafterNumbersofYearsElapsedButton
            app.CalculateTotalAmountafterNumbersofYearsElapsedButton = uibutton(app.Panel, 'push');
            app.CalculateTotalAmountafterNumbersofYearsElapsedButton.ButtonPushedFcn = createCallbackFcn(app, @CalculateTotalAmountafterNumbersofYearsElapsedButtonPushed, true);
            app.CalculateTotalAmountafterNumbersofYearsElapsedButton.IconAlignment = 'center';
            app.CalculateTotalAmountafterNumbersofYearsElapsedButton.Position = [14 49 317 22];
            app.CalculateTotalAmountafterNumbersofYearsElapsedButton.Text = 'Calculate Total Amount after Numbers of Years Elapsed';

            % Create Output
            app.Output = uieditfield(app.Panel, 'text');
            app.Output.Editable = 'off';
            app.Output.HorizontalAlignment = 'center';
            app.Output.Position = [173 17 100 22];

            % Create InterestRateEditField_2Label_2
            app.InterestRateEditField_2Label_2 = uilabel(app.Panel);
            app.InterestRateEditField_2Label_2.HorizontalAlignment = 'right';
            app.InterestRateEditField_2Label_2.Position = [16 17 87 22];
            app.InterestRateEditField_2Label_2.Text = 'Total Amount =';

            % Create UITable
            app.UITable = uitable(app.LeftPanel);
            app.UITable.ColumnName = {''};
            app.UITable.RowName = {};
            app.UITable.ColumnSortable = true;
            app.UITable.FontSize = 10;
            app.UITable.Position = [7 16 399 259];

            % Create RightPanel
            app.RightPanel = uipanel(app.GridLayout);
            app.RightPanel.Layout.Row = 1;
            app.RightPanel.Layout.Column = 2;

            % Create UIAxes
            app.UIAxes = uiaxes(app.RightPanel);
            title(app.UIAxes, 'Amount Deposited vs Total Amount ')
            xlabel(app.UIAxes, 'Time (Years)')
            ylabel(app.UIAxes, 'Amount')
            app.UIAxes.PlotBoxAspectRatio = [1 1.05109489051095 1];
            app.UIAxes.Position = [9 8 459 487];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = InterestRate

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end