6.1) App Screen 3 “View Analytics” for Expense Tracker

We have come a long way into this journey and here we are developing the third and the final screen for our Expense Tracker application. If you have not yet looked at our second screen here you go: App Screen 2

This screen is called “View Analytics” and as the name suggests it helps the viewer get a visual representation of his spends.

Due to the complex nature of visual representation techniques like graphs and pie charts which are affected by dynamic values provided by the user, it was a cumbersome task for us to provide both the graph and pie chart option to users. Nevertheless they provide a good visual feel and hence it motivated us to implement both the pie chart and the bar graph in our application.

Below we explain various aspects of our screen.

1. Select Analytic Type Option

This screen is a very simple one which requires no user input. It just displays a pie chart or a bar graph according to the user preference. The option to select analytics is as shown below. It provides two options namely Graph and Pie Chart.

Option to select analytic type

2. Pie Chart

One of the options that we see in the view analytics option is the pie chart. As we can see in the image below, the pie chart shows the percentage of spends in each of the categories up to the date the pie chart is viewed. The category names along with their percentages are shown within the pie chart itself. To help distinguish the categories each sector is represented by a unique color.

At the back-end what it does is it takes the aggregate of the spends in each of the categories and then calculates the percentage of each of them.

3. Bar Graph

The other option that we see alongside pie chart is the graph option which is essentially a bar graph. The following image shows how exactly it looks like.

Bar Graph

It has bars which represent the aggregate spends in each category. Each category is represented with a different color so as to help the user distinguish between different spend categories. The category names are shown at top while the spends amount is shown directly on top of the bar. The y-axis even shows the scale indicating the amount in Rs.

Now you might wonder why is the bar graph in horizontal orientation even though the screen orientation is vertical. This is because as the number of categories increases it becomes difficult to accommodate them all. Hence we chose the horizontal orientation which allows us to accommodate all the categories.

At the back-end we just pull out the aggregate using the aggregate function for each of the categories.

You can try out our latest app here: ExTra Expense Tracker APK

Changes

In this section we discuss the changes we made to our app with reference to the prototype that was made earlier.

1. In the prototype the user just had to scroll horizontally to view graph and pie chart but as it was unconventional, we changed it and provided an option to select the analytic type.
2. Earlier in the prototype, we provided an option to select a particular month of a year for which the user wants to view analytics. Now the idea was to provide flexibility to the user, but we had some issues off late with time-stamp implementation in our application which delayed most of our work. Also the implementation would become dynamic which was difficult for us to handle.
3. This is a minor change. We removed the legends in the graphs so that we get more space to display the graphs. The data is now directly shown in the graph itself.

These are the three changes that we made. We have also just listed them in the prototype blog for reference.

Here is the link to updated blog: 1.2) App wireframe/prototype for Expense Tracker

Here we come to an end of our development phase of the Hasura Internship. Now we move on to the testing and debugging phase which will be carried out using the user feedback. So stay tuned!

-Akash Dabhi and Vinit Neogi