Visualize data on a mobile device using Visual Studio

This article is about displaying data in mobile applications built on .NET Compact Framework platform. It demonstrates several typical data structures and their visualization on a small display of a mobile device.

Introduction

Choosing an appropriate and readable form of displaying data can be tricky, particularly if you are limited by the display size of a mobile device as well as its relatively slow processor. Resco provides several controls coping with this problem in various scenarios.

A good mobile application has to be easy to handle. The user interface should be as simple as possible, preferably operable with one hand. Whether the user is driving a car or doing other activities, it is annoying, if the application needs the attention of two hands at once. All this can be easily achieved with Resco MobileForms Toolkit.

Data in a form of table

Either it is a SQL CE mobile database, DataTable class or any other IList data source object, Resco SmartGrid for .NET is perfect for displaying data in a form of table. Built-in editing capabilities allow you to edit the displayed data. You can even provide your own UserControl derived object to edit the data in the cell and thus create your own editor. By using an ImageCell, you can display images inside the cells. This may help to provide additional information to the user while saving space on a small display. You can also set SmartGrid to utilize touch scrolling. The user can then scroll using his thumb.


Figure 1	Figure 2	Figure 3

Example: Products table showing each product's sales change, corresponding percentage and whether the product is in stock (see Figure 1).

Example 2: Filling in the order using the built-in auto-edit capabilities (see Figure 2 and 3).

Data in a form of list

You can display one dimensional list of data easily using Resco AdvancedList for .NET. Thanks to the possibilities of customization that Resco AdvancedList for .NET offers, you can create almost any kind of user interface. Compared to SmartGrid, AdvancedList only has a vertical scroll bar. It is designed in such a way, that horizontal scroll bar is not needed, because all the data can be fit into its width. This simplifies the user interface and brings more comfort for the user who can operate the list using one hand (there is no need for the stylus).

Figure 4

Example: Customer list showing detailed information about the selected customer. You can also display images and icons within AdvancedList's rows and thus create a well-arranged list of properties of the customer (see Figure Figure 4).

Tree-like data structures

Organizing data into a tree certainly brings advantages of fast searching and brings the opportunity to put related data together thus bringing order into the structure. The disadvantages are difficult data manipulation and display. Resco AdvancedTree for .NET puts both disadvantages aside. Filling AdvancedTree for .NET is easy, because you can either fill all the branches of the tree yourself, or you can have AdvancedTree fire an event each time it needs the data to be loaded. In the event handler it informs you which is the parent of the node you are currently adding as well as what is the level of node you are currently adding. You can choose a different node template for each node and thus graphically differentiate the individual levels of the tree nodes.

Figure 5

Example: A list of customers showing each customer's orders and order details at the third level (see Figure 5).

Statistical data and their graphical representation

Charts are very useful for graphical representation of huge amount of statistical data. CompactChart for .NET offers 5 different kinds of charts for displaying the data. These include bar chart, line chart, pie chart, area chart and doughnut chart.


Figure 6	Figure 7	Figure 8

Example: Bar chart showing a business result of a company in various affiliated companies or a turnaround in individual quarters of the year (see Figure 6).

How to display date/time related data?

Undoubtedly, the most common way of displaying date and time is in a calendar-like UI. However, programming the calendar is time consuming. Resco Outlook controls (part of MobileForms Toolkit) are designed for displaying the date/time related data comfortably - in a calendar. OutlookWeekCalendar control draws an overview of a week and can also display a time interval.


Figure 9	Figure 10

Example: Displaying the scheduled business visits, appointments and meetings using several views: day view, week view, month view, year view (see Figure 7). Displaying the date and time is one thing, choosing it is another. For this purpose you can use OutlookDateTimePicker.


Figure 11	Figure 12	Figure 13

Example: Setting the date and time of the order, invoice issue, contact's birthday, ... (see Figure 8).

About Resco MobileForms Toolkit

More information about Resco MobileForms Toolkit can be found here.

You can download the evaluation version of Resco MobileForms Toolkit here.

For tutorials on Resco MobileForms Toolkit controls, refer to this webpage.

To view sample projects demonstrating the usage of Resco MobileForms Toolkit controls, refer to the following webpage.