Finance Manual – Reports

This is part of the manual for the Android Finance Application.

Finance Charts

There are a limited number of charting options available in Finance.

Charts are rendered using SVG within an HTML page. This allows us to focus on creating the content of the charts, without needing to implement low-level drawing routines, or use a bespoke library. The advantage of using SVG is that the HTML page can be printed using a variety of supported mechanisms, the simplest of which is emailing yourself the chart and printing it on your PC.

We are using the D3 library that provides a rich framework for manipulating data with a variety of animated transforms.

Select a Chart

From the Finance Home screen, press the Reports icon.

This will open the chart selection screen, shown below:

  1. Select a chart from the list
  2. Touch the View icon to see the chart in an internal WebView screen. For devices running Android OS2.x, you will be asked to choose an external application to render the chart. This requires an SVG capable browser such as Opera Mobile
  3. Touch the Share icon to select applications that can receive an HTML file, e.g. a browser program.
  4. Touch the Send icon to select applications that can send an HTML file, e.g. an email program, Dropbox or Google Drive

The charts are rendered as an animated HTML page, shown below.

You can zoom in and scroll around the chart if required.

Chart Examples

To see real examples of the charts, then click on the links below an open the HTML files in a browser.

Bar Chart Example. Hover over the bars and labels to see tooltips with amounts.

Pie Chart Example. Click on the pie segments to get a sub-category split.

Line Chart Example. Hover over the category labels to highlight the line.

Sharing and Sending Charts

If you choose to share the chart, you will be presented with a Chooser that lists the applications that can support the HTML page, shown below:

Select the application to share or send to. The native ability to share application data between any installed application is one of the best features of Android, a feature that is sorely lacking in the competition.

Pie Charts

Pie charts are generally used to show information relative to each other. For instance, the chart Top Expenditure by Category shows the top 10 categories for expenditure, as shown below. It can be quickly determined that the Motorbike category accounts for just under 1/4 of the expenditure for that year.

Some pie charts in Finance have the ability to ‘drill-down’ into sub-categories by pressing on a segment of the pie chart (1). The chart below shows the sub-categories for Motor.

Touching a sub-category segment (1) will show a ‘toast’ with the value of that segment (2). Pressing the center of the pie chart will revert back to the category view (3).

Back to contents.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s