Transaction Analyzer

A open source lightweight html5 based analyzer for bank transaction to gain insight into your personal expenses and income.

Built With

  • D3.js - A JavaScript library for processing and visualizing data.
  • jQuery - The Write Less, Do More, JavaScript Library.
  • jQuery DataTables - Interactive Table plug-in for jQuery.
  • Skeleton - A dead simple, responsive boilerplate.


Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Running a Web Server

The project is a web app based on HTML5, JavaScript and CSS. Which should run in a webserver on your machine. This local webserver is needed to allow the code to access your local files.


$ cd /root/dir/of/this/project/
$ python -m SimpleHTTPServer *PORT*

Open the application in your favorite webbrowser at: http://localhost:*PORT*/


Donwload and install XAMPP ( Run XAMPP and enable the Apache module (Runs on port 8000 by default) If you wish to alter the port you can do so by changing both the XAMPP config and the Apache config Place the repository in htdocs/ directory in the XAMPP installation directory.

Open the application in your favorite webbrowser at: http://localhost:*PORT*/*REPOSITORY_FOLDERNAME*/

Examples and Personal Transaction Data

The project contains example data to be used in the examples/ directory. You can use this data to run tests and develop the application.

You can download your personal transaction data as CSV format from your own banks website. Placing personal data files in the repository is a bad idea. Within the webbrowser the user is able to select a CSV file from the file system. This will keep any personal data from being on the webserver and in the repository. The app will save the resulting analytics and settings to a file on the file system, which can be reopened later.

Adding your own Bank CSV format

Each Bank uses its own CSV format to describe transactions. This bank-dependent transaction format (a raw transaction) has to be mapped to a bank-independent transactionFormat. This processed is called mapping. The process of mapping a raw transaction to a transaction is done by a mapper. Each bank CSV format will have its own mapper. All available mappers are accessable by the global mappers instances.

var transactions =;

When you want to create your own mapper, add a new *SHORTBANKNAME*_mapper.js file to the js/src/mapping/ directory and make sure to include it in the index.html file.

After adding the file, the mapper has to be implemented. The mapper is a function that receives each individual raw transaction and it should preform two actions on each transaction: 1) First it should transform the raw transaction to the transactionFormat as described below. 2) Secondly it should return a Transaction object using return new Transaction(transactionFormat); from this transactionFormat.

The bank-independent transactionFormat looks like this:

var transactionFormat = 
     amount         AS number       The amount of money transfered in this transaction (correctly signed),
     date           AS datetime     The date on which the transaction occurred,
     myAccount      AS string       The account number (IBAN) of the user in this transaction,
     otherAccount   AS string       The account number (IBAN) of the other party in this transaction,
     otherName      AS string       The account name of the other party in this transaction,
     information    AS string       Additional information about this transaction as a string,

All mappers are located in the js/src/mapping/ directory. You can take a look at these as examples.