Transaction analysis web app

As a poor student, I always tried to keep a close eye on what I spent. This usually amounted to skimming statements and manually keeping track of what went where, a decidedly sub-optimal solution.

Thanks to an initiative called MiData, you are now able to download transaction histories from your current account in CSV format, which is ripe for analysis. I built a small tool for myself, which I put online here for your enjoyment. I should note this is the first slightly complex thing I’ve written in Javascript, so if it breaks in unexpected ways feel free to get in touch and let me know.

Without further ado, here is what the tool looks like when it’s been fed with some data:


Load your data

This tool is free, and doesn’t aim to profit in any way from the simple analysis it enables, so the data remains local at all times, and nothing is uploaded to any servers anywhere else. See the (tragically poor) code on Github here for further information.

The first step is to get your data from your bank’s website. For, e.g., Barclays, you just have to select a date range and export to an Excel-compatible format, which in this case is .CSV.


This tool is for lumping transactions into categories, so the first step is to select the correct columns for this purpose. For Barclays the transaction description is in the ‘Memo’ column, and the transaction amount in the ‘Amount’ column. Selecting both of these will allow you to start categorising the transactions.



Once the transactions are loaded and parsed, you are able to select a category for the displayed transaction, e.g. here for some no-doubt frivolous purchase on Amazon.


Upon choosing a category from the hard-coded list, any other transactions with the same initial part of the description, e.g. here ‘Amazon UK Marketpl’, will be categorised in the same way. On a technical note, this is done very simply here by splitting the description string at the first occurrence of a double-space, e.g.

description = description.split('  ')[0];

This is probably too simple, and should be improved in the future.


After a couple of minutes of clicking and selecting various categories, and reminiscing along the way about all of the crap you’ve spent your money on over the past couple of years, you will build up a well-segmented and useful set of data ripe for plotting. Here I’ve used the Chart.js library, as it provides a nice amount of customisation and interactivity without being too heavy. Hovering over any part of the plot will show a little tooltip giving the hovered value.

Here’s some data from my own account, with the first y-axis scrubbed out.


You can immediately see whether or not your total account balance is increasing on average, and in what amounts you tend to spend on different things. The histogram is customisable, so you can e.g. zoom in on small purchases


which for me are dominated by travel (thanks TFL!) or small food purchases (thanks vending machines too close to my office).


Finally, after a hard time doing all of that manual categorisation, you can see some summaries at the bottom of the page (totals and quartiles removed).


Saving and loading categories

If you want to save the categories for this particular dataset, clicking the ‘Save Categories’ button at the top will download a ‘categories.json’ file. This text file contains a simple list of all of the categories you have selected so far, which can be opened in any text viewer.

Note – the categories are in chronological order, starting at the earliest transaction.

Once a data file has been loaded, you can also load your previously-saved categories.json file to continue where you left off.

Happy analysing, and I absolve myself of any responsibility for any shocks or epiphanies, joy or sadness, and fights or reconciliations which may occur from the use or misuse of this tool.




















Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s