Online Home Budget Application Explained In Simple Steps

Do you need a simple application that will show all your home budget and you need to show it to others? Why not use our online spreadsheet? We will show you how to make it in a couple of simple steps:

  1. Create a new spreadsheet in your Dashboard. Set the properties for the sheet in menu Main->Sheet properties.

2. Add title (optional) – merge B2 to O2 and P2 to Q2. Change text and fill colours, borders, etc. to your preferences.

3. Add Summary Section: Net income (C4), Spendings (C5) and Savings (C6). Make C4 (or whichever cell you want) unprotected cell if you want to allow editing in Published mode (menu Format->Unprotected cell). Insert formula in C5 -> =D17. This will be the sum of all your spendings explained below. Insert formula in C6 -> =C4-C5.

4. Add Spending Category – specify all your spendings in cells B9 to say B16, but use as many rows as you wish. Put the values for Budget and Actual spendings in cells C9 – C16 and D9 – D16 respectively – you can change formatting for these cells to ‘Currency’ in menu Format->Cell format. The differences will be shown in cells E9 – E16 (In cell E9 insert =C9-D9, select the small square in the bottom right corner of selected cell and drag down to E16. This should fill all cells with the proper references).

At the bottom of Spending Category section add sums for Budget, Actual and Differences (in C17 insert =SUM(C9:C16), in D17 insert =SUM(D9:D16)…)

5. Now, let’s go to the charts. Our example uses 2 RGraph Pie charts to show budget and actual spendings structure. Merge cells G4 to K17 and M4 to Q17. You can insert a chart by using CHART function directly in the formula bar or in the Formula editor or you can use the chart builder.

If you want to get to know with the structure of CHART function insert the following formulas in the both merged cells respectively. Find out more on the charts in this article.

Budget chart:

=CHART(
  [B9:B16],
  [C9:C16],
  "rgraph",
  "pie",
  [{
    widht: 600,
    height: 500,
    colors: ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0','#F32CB0'],
    exploded: 7,
    shadowBlur: 3,
    shadow: 'true',
    shadowOffsetx: 2,
    shadowOffsety: 2,
    shadowBlur: 3,
    labelsSticks: 'true',
    labelsSticksLength: 25,
    gutterTop: 50,
    title: 'Monthly Budget',
    linewidth: 2,
    strokestyle: 'white'
  }]
)

Actual spendings chart:

=CHART(
  [B9:B16],
  [D9:D16],
  "rgraph",
  "pie",
  [{
    widht: 600,
    height: 500,
    colors: ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0','#F32CB0'],
    exploded: 7,
    shadowBlur: 3,
    shadow: 'true',
    shadowOffsetx: 2,
    shadowOffsety: 2,
    shadowBlur: 3,
    labelsSticks: 'true',
    labelsSticksLength: 25,
    gutterTop: 50,
    title: 'Monthly Spending',
    linewidth: 2,
    strokestyle: 'white'
  }]
)

6. You can make any cell/s editable in the Published mode as described in point 3. This will allow all visitors of your spreadsheet to see the changes instantly.

7. Now it’s time to publish your spreadsheet. Click on the menu Main->Publish and select required options (more on this here) and press ‘Publish spreadsheet’ and that’s it. Your spreadsheet is online.

The result of our work can be found at this addres: https://totalsheets.com/spreadsheet/rYjVX5XlmlLV

You can embed your spreadsheet in any web page if you want. Just use an iframe element. We use Worpress plugin for this purpose. The result is shown below. Edit the values in Net income, Budget and Actual columns to see the changes.

 

If you need more explanation just ask a question in our Q&A section or comment below.