Using Xuni for Data Visualization on Android

The final sprint for my internship internship has finally arrived. We've reached the point where we need to add some data visualization to the Fitness Explorer app which is otherwise complete. This is a good point for us to delve into how Xuni was used in the app, and the different types of data visualization it provides. At the beginning of my internship I was given multiple requirements for the developing Fitness Explorer app. I needed to determine the best data visualization to highlight each aspect of my data.

Radial Gauge

For the first requirement I needed a way to display the user's total calories burned over the course of the day, and since this was constantly changing as the day goes on I needed a way to easily display that information. The Radial Gauge was used to display the daily calories lost by the user. It was very simple to use and had many different features that can be changed and customized.

One of the requirements for the Radial Gauge was that I needed to make the max number on the gauge always increment by 1000, this means that if the user burns 1200 calories that the max number on the gauge be 2000.

FlexPie

The second requirement for the Fitness Explorer app was that I needed a way to display the activities (for example, walking, running, etc.) that the user has completed over the course of the day. The FlexPie was actually fun to use. An interesting detail about the FlexPie chart is that you can change the inner radius to make a donut like shape, and you can have this be as thin as you want.

My requirement for the FlexPie was that I needed to show all the activities the user has done over the course of the day and the calories spent during each activity. The nice thing about the FlexPie is that all you need to do is pass it a List of objects and tell it the name of the items list you're binding to.

FlexChart

The third requirement was that I needed a way to display to the user the calories burned over the course of a 7 day period. The FlexChart is a useful tool for this though it can be utilized by many different types of apps. FlexChart has the ability to be many different types of charts, such as a bar chart, line chart, or area chart. It is entirely customizable, from the colors of the series to more advanced functions like animations when adding or updating a value.

Just like the FlexPie, the FlexChart allows the programmer to just pass in a List of objects and easy bind the data. It makes implementing the FlexChart incredibly easy.

Calendar

The fourth requirement was to display a calendar and show the user all of the activities performed each day. I also needed to be able to show the user a scrollable view that showed all the activities on a day pressed with the calories the user lost during each activity. On top of that I needed to be able to show the user all the activities performed on a day so the user can click on a day and see this information. The Calendar is an incredibly powerful tool. It allows users to view activities during the day, and has event handlers for when the user chooses a day.

The requirement that each day needed to show which activities took place on a given day was actually pretty difficult to do. I had to find the number of activities in each day and display that number using the colored squares on each day. When a user picks a day all the day's activities display on a side scrolling view under the calendar. I had to set up an Event Handler for when the calendar loads to check each day and load the appropriate activities, and then have another Event Handler for when the user selects a day to update the list under the calendar.

FlexGrid & CollectionView

The fifth and final requirement was that I needed a way to display an updating, scrollable list of all the users activities, the times, and calories lost to the user. The FlexGrid is another interesting tool. It provides a great way to display information to the user in a tabular format, and even has the ability to alter data within the FlexGrid and can update databases at runtime.

The requirement was to automatically load the previous seven days of user activities whenever they scrolled to the bottom of the FlexGrid. We achieved this by creating my own custom CollectionView (ie. IFitnessCollectionView) and by extending CursorCollectionView. FlexGrid has the built in feature to automatically load more data when extending CursorCollectionView. Here you can see the code necessary to set the customized CollectionView for FlexGrid.

Then you need to create a new CollectionView class which will extend: com.grapecity.xuni.core.CursorCollectionView

From here you'll need to override a method called getPageAsync. This method is automatically asynchronous so all you need to do is simply return the next page of data. In our case a page was just the previous seven days of data.

Wrap up

This marks the end of my series on developing the Fitness Explorer app for Android. If you haven't downloaded the app yet, you can grab it from the Google Play store and see the source code on GitHub. Check it out if you haven't already!