data visualization on mobile devices. - darren...

Data Visualization on Mobile Devices

Darren Hall

Report submitted in fulfilment of the requirements for the BSc (Hons) in Computing Multimedia

Systems/Web Engineering at the Institute of Art, Design and Technology (IADT).

Darren Hall Data Visualization on Mobile devices

The incorporation of material without formal and proper acknowledgement (even with no

deliberate intent to cheat) can constitute plagiarism.

If you have received significant help with a solution from one or more colleagues, you should

document this in your submitted work and if you have any doubt as to what level of

discussion/collaboration is acceptable, you should consult your lecturer or the Course Director.

WARNING: Take care when discarding program listings lest they be copied by someone else,

which may well bring you under suspicion. Do not to leave copies of your own files on a hard

disk where they can be accessed by other. Be aware that removable media, used to transfer work,

may also be removed and/or copied by others if left unattended.

Plagiarism is considered to be an act of fraudulence and an offence against Institute discipline.

Alleged plagiarism will be investigated and dealt with appropriately by the Institute. Please refer

to the Institute Handbook for further details of penalties.

The following is an extract from the B.Sc. in Computing (Hons) course handbook. Please

read carefully and sign the declaration below

Collusion may be defined as more than one person working on an individual assessment. This would include jointly developed solutions as well as one individual giving a solution to another who then makes some changes and hands it up as their own work.

DECLARATION:

I am aware of the Institute’s policy on plagiarism and certify that this thesis is my own work.

Student :

Signed

Failure to complete and submit this form may lead to an investigation into your work.


Abstract

This dissertation describes the development of a web application for visualizing large amounts of data. The application is designed to be used on multiple device types, e.g. mobile phone, tablet and desktop. The application was developed using Javascript and made extensive use of Sencha Touch, which is a HTML5 and Javascript framework for developing mobile web applications.

The application visualizes the population and number of mobile phones for various countries. The data for an individual country can be viewed and multiple countries can be compared. Testing showed that the application was easy to use and adapted to different device types.

The application can be found here: http://darrenhall.ie


Acknowledgements

The author would like to thank the following people:

Rupert Westrup for his supervision and guidance on this project.

Lorraine Hall and Gregory Hall for their support during the project.


Contents Data Visualization on Mobile Devices ..................................................................................................... 0

Abstract ................................................................................................................................................... 2

Acknowledgements ................................................................................................................................. 3

1.0 - Introduction .................................................................................................................................... 7

2.0 - Research .......................................................................................................................................... 8

2.1 - Forms .......................................................................................................................................... 8

2.1.1 – Charts ...................................................................................................................................... 9

2.1.1.1 - Pie Chart ............................................................................................................................ 9

2.1.1.2 - Bar Charts ........................................................................................................................ 10

2.1.1.3 - Line Graphs ..................................................................................................................... 10

2.1.1.4 - Scatter Plots .................................................................................................................... 11

2.2 - Function .................................................................................................................................... 12

2.3 - Visualizing Data ......................................................................................................................... 13

2.4 - Mobile Devices .......................................................................................................................... 14

2.4.1 - Screen Size ............................................................................................................................. 15

2.4.2 - Processing Power ................................................................................................................... 15

2.4.3 Context ..................................................................................................................................... 16

2.5 - Mobile Usability ........................................................................................................................ 17

2.5.1 - User Interactivity ................................................................................................................... 17

2.5.2 - Navigation .............................................................................................................................. 18

2.6.0 - Technology Analysis ............................................................................................................... 18

2.6.1 - HTML5 .................................................................................................................................... 18

2.6.2 - Javascript ............................................................................................................................... 20

2.6.3 -Javascript Libraries .................................................................................................................. 20

2.6.3.1 - JQuery Mobile ................................................................................................................ 20

2.6.3.2 - Kendo UI ........................................................................................................................ 20

2.6.3.3 – Sencha ........................................................................................................................... 21

3.0 - Requirements ............................................................................................................................ 22

3.1 - User Requirements ................................................................................................................... 22

3.1.1 - UML - Use Case Diagram ........................................................................................................ 23

3.2 - Functional Requirements .......................................................................................................... 24

3.3 - Non- Functional Requirements ................................................................................................. 25

3.4 - Feasibility Study ........................................................................................................................ 26


3.5 - Project Plan ............................................................................................................................... 26

3.5.1 - Research ................................................................................................................................. 27

3.5.2 - Implementation ..................................................................................................................... 27

3.5.3 - Testing .................................................................................................................................... 27

4.0 - Design ....................................................................................................................................... 28

4.1 - Overall Architecture .................................................................................................................. 28

4.1.1 - Models ................................................................................................................................... 29

4.1.1.1 - Proxies ............................................................................................................................. 30

4.1.1.2 - Associations .................................................................................................................... 30

4.2 - Views ......................................................................................................................................... 31

4.3 - Controllers ................................................................................................................................ 32

4.4 - Stores ........................................................................................................................................ 34

4.5 - Profiles ...................................................................................................................................... 34

4.6 - User Interface Design ................................................................................................................ 35

4.6.1 - Mobile Design ........................................................................................................................ 35

4.6.2 Tablet Design............................................................................................................................ 36

4.7 - Navigation ................................................................................................................................. 37

4.7.1 - Second Navigation ................................................................................................................. 38

5.0 - Implementation ........................................................................................................................ 39

5.1 - Development Process ............................................................................................................... 39

5.2 - Project Plan / Management ...................................................................................................... 39

5.3 - Sencha Touch Installation ......................................................................................................... 40

5.4 - Development ............................................................................................................................ 42

5.4.1 - JSON – Cell Phone Store......................................................................................................... 42

5.4.2 - PHP – Population Store .......................................................................................................... 43

5.5 - Layout ....................................................................................................................................... 45

5.6 - Selecting a Country ................................................................................................................... 46

5.7.0 - Carousel ................................................................................................................................. 48

5.8 - Pie Chart .................................................................................................................................... 49

5.9 - Update Year .............................................................................................................................. 50

5.10 -Statistics ................................................................................................................................... 51

5.11 - Compare Mode ....................................................................................................................... 53

5.11.1 - Bar Chart .............................................................................................................................. 54

5.12 - Adapting to mobile ................................................................................................................. 57


5.13 - Sub Menu ................................................................................................................................ 58

5.14 - Information / Help .................................................................................................................. 59

5.15 - Issues ....................................................................................................................................... 60

5.15.1 – Selecting a Bar ..................................................................................................................... 60

5.15.2 - Grouped By Region .............................................................................................................. 62

5.15.3 - Production Build .................................................................................................................. 62

6.0 - Testing ....................................................................................................................................... 64

6.1 - User Testing .............................................................................................................................. 65

6.2 – Discussion of Results ................................................................................................................ 65

6.2.1 - Slow ........................................................................................................................................ 66

6.2.2 – Navigational Arrows .............................................................................................................. 66

6.2.3 – Main Image ........................................................................................................................... 66

8.0 - References ................................................................................................................................ 68

9.0 – Appendix .................................................................................................................................. 71

9.1 – Testing Survey .......................................................................................................................... 71

9.2 – Results ...................................................................................................................................... 73


1.0 - Introduction

Data Visualization is the term used to describe any technology that contains data and

displays it to a person in a visual manner. Data visualizations are also known as data

graphics as explained by Edward Tufte “Data graphics visually display measured quantities

by means of the combined use of points, lines, a coordinate system, numbers, symbols,

words, shading, and color [1]” (Tufte 1983).

Data visualizations using the Cartesian co-ordinate system (graphs) were first developed in

the 17th century by Rene Descartes. His method not only presented data but allowed

mathematics to be performed based on co-ordinates. This was then recognized as a way of

presenting information to others as well [2] (Few, 2007).

French theorist Jacques Bertin published two books that influenced representing

information graphically. These are Semiology of Graphics in 1967 and Graphics and Graphic

Information Processing in 1977. Semiology of Graphics is an attempt to create principals of

graphic communication. It also presents a study of the techniques used including shape,

colour, texture, volume and size [3] (Mackinlay, 2009).

In 1983 data visualization enthusiast Edward Tufte published his book “The Visual Display of

Quantitative Information”. It proved that there were effective ways of displaying data

visually but also showed that most existing visualizations were lacking in effectiveness. One

year after the release of the book Apple released a computer that focused on graphics as a

mode of interaction and display. This integrated data visualizations with the way people

interact with computers [2] (Few, 2007).

The amount of data that we have collected, stored and made accessible has increased

significantly over recent years. This is due to the fact that the internet allows data to be

stored and made available with very little effort. However the problem is filtering the

valuable data from the invaluable data and establishing how to use it to have a positive

impact in business decisions or research.

The aim of this project was to deliver a web application using a modern JavaScript library

that successfully visualizes a large amount of data on multiple devices. It would contain

visual representations of the data that are aesthetically pleasing and easily understood.

The application allows a user to view and interact with two large data sets regarding various

countries in the world, the population and the number of mobile phone devices. Various

charts and statistics are displayed to visualize the data sets.

The application works effectively on a range of devices from tablets to mobile phones. To

achieve this, the challenges of the mobile environment (e.g. Screen size) had to be taken

into account prior to development.


2.0 - Research

The main aim of data visualization is to communicate information clearly and effectively so

it can be easily understood. Vitaly Friedman states that “It doesn’t mean that data

visualization needs to look boring to be functional or extremely sophisticated to look

beautiful. To convey ideas effectively, both aesthetic form and functionality need to go hand

in hand, providing insights into a rather sparse and complex data set by communicating its

key-aspects in a more intuitive way [4+” (Friedman 2008).

2.1 - Forms

Data visualization can appear in many different forms depending on the type and amount of

data being visualized. Different forms of data visualizations range from simple charts to

more complex diagrams or even interactive applications. These include bar charts, line

charts, histograms, maps and stream graphs.

No matter what form a representation of data will take it must maintain graphical

excellence as explained by Edward Tufte: “Excellence in statistical graphics consists of

complex ideas communicated with clarity, precision, and efficiency [7]” (Laumans, 2009).

Figure 2.1 – An example of a complex form of data visualization


2.1.1 – Charts

Charts are the most common form of data visualization. Choosing what chart to use when

visualizing data depends on the structure of the data. Different structures of data are:

Discrete data – Data that can only have certain values such as a number of people in

a room (there couldn’t be half a person).

Continuous data - Data that can have any value such as a person’s weight (70.8kg).

Univariate Data – Data that deals with single variables and does not deal with

relationships.

Bivariate – Data that deals with two variables and deals with relationships and

comparisons.

2.1.1.1 - Pie Chart

William Playfair was the first to represent data in a pie chart form in his book Statistical

Breviary in 1801. Pie charts are useful for representing the relative proportions of a few

categories. The greater number of categories means the greater number of “slices” in the

pie. The more “slices” in the pie, the more difficult the chart is to read [5] (Greenwood,

2009). Although pie charts are the most common form of visualizing proportional data,

there are mixed views over their effectiveness.

Figure 2.2 – Example of a pie chart with three slices


2.1.1.2 - Bar Charts

Bar charts or column charts represent values as bars or columns. They are good for

representing categorical data and comparing the values of independent variables. If there is

more than one set of data to be visualized, each one can be represented in a separate graph

or all of them can be integrated and displayed in one chart as multivariate clusters of

bars/columns [6](StatSoft, 2012).

Figure 2.3 – Example of a bar chart

2.1.1.3 - Line Graphs

Traditional line graphs are used to measure a single variable of continuous quantities.

However multiple lines can be used measuring multiple variables. They are created by using

a Cartesian grid with a horizontal axis usually representing time. Points are plotted on the

grid at the value of the variables [7] (Laumans, 2009).

For example, a business company may use a line graph to calculate their gross profit over a

certain length of time.


Figure 2.4 – Example of a line graph with two lines

2.1.1.4 - Scatter Plots

Scatter plots are used to visualize a piece of data that has two quantifiable variables. The

values are plotted on a Cartesian grid. They are commonly used for identifying trends within

data or to find relationships between data [7] (Laumans, 2009).

Figure 2.5 – Example of a scatter plot


2.2 - Function

The function of data visualization is its purpose or the reason for visualizing the data. The

main functions of visualizing data are:

Minimising the time in which it takes to read and understand large amounts of data

Identifying statistics that would not be seen in reports or tables. Problems or

solutions to existing problems may be identified.

Using findings to predict trends for the future.

An example is London’s cholera epidemic in 1855. John Snow, a British physician used

graphs to show London’s cholera epidemic. He used dots on a map to show individual cases

of cholera. They revealed that many of the cases could be linked to a water pump on Broad

Street. This use of graphics also showed the power data visualization can have [3]

(Mackinlay 2009).


2.3 - Visualizing Data

Every set of data can be represented in graphical form. Before it can be represented visually

it must be examined and understood. The type of data must be known and how it is

organized. A seven step guide has been developed by Ben Fry in order to visualize a data set

effectively [7] (Laumans, 2009).

1. Acquire – The data must be retrieved from a source. For this project the data

will be retrieved from two sources, a JSON file and a MySQL database.

2. Parse – The data must be organized in a form that it is suitable for visualizing.

It must be structured into categories.

3. Filter – Data that is not important or not needed must be removed in order

to avoid information overload.

4. Mine – Statistics or data mining methods can help identify patterns or trends

in the data.

5. Represent – A form of visualizing the data must be chosen.

6. Refine – The basic form should be improved to enhance the visualization and

make it clear and visually appealing.

7. Interact – Allow methods of interaction to the visualization. Allow users to

view what they want to see.

Edward Tufte also compiled a checklist to develop an effective graphical representation of

data [7] (Laumans, 2009).

1. Show the data to the user.

2. Do not alter or distort the data.

3. Large sets of data should be coherent.

4. The visualization must serve a purpose

5. The visualization must show the data at multiple levels (overview versus detailed

view)

6. The users of the visualization must be encouraged to compare pieces of the data


2.4 - Mobile Devices

In the last number of years there has been a massive shift from personal computers to

mobile devices (e.g. Smartphones, portable tablets). This shift has brought a significant

change in terms of how we access the internet and interact with web applications. For

example, a person can check bus times on their mobile device and know exactly when it’s

due to arrive. However, there are challenging trends which have surfaced in how we access

large quantities of information on these devices [8] (Spool 2011).

Due to the decreasing cost of disk storage, processing power and network bandwidth data

visualization on mobile devices is escalating. These days, there is so much information

stored on the internet and because of the characteristics of mobile devices it places new

pressures on developers to visualize it successfully[8] (Spool 2011).

There are examples of developers who have overcome these challenges in the mobile

environment. An example is the website patientslikeme.com where individuals with serious

medical conditions share their stories and experiences hoping to learn and get advice from

others. Before the use of mobile applications and data visualization, this information would

be entered as text and given to other users as text in an online forum. However this site

uses inherent processing and data warehouse to match patients with the same condition.

Charts are displayed on each user’s profile. The chart displays their progress in a simple and

easy to understand manner [9] (PatientsLikeMe 2012).

There are some restrictions when developing an application designed for mobile devices.

These include:

1. Screen Size: Screens are very limited (small size, low resolution and fewer colours).

Currently the largest screen size on a mobile device is 4.80 inches [10] (Phonearena

2012).

2. Processing Power: Mobile devices have less processing power than computers.

Current top processor for mobile phones is a Quad core 1500 MHz processor on the

Samsung Galaxy S III [10] (Phonearena 2012).

3. Download Delays: Starting the applications or navigating from page to page can take

a long time. Users using a 3G service can experience problems if they are in an area

with poor connectivity.


2.4.1 - Screen Size

Although the screen resolution on mobile devices is increasing, the physical size of the

screen will never be comparable to the size of a desktop. The majority of applications today

have complex interfaces with toolbars and panels. Also, desktop users can have multiple

gadgets placed around the screen. These could be web applications, notes, widgets etc.

Mobile users are forced to scroll large lists and go back and forth through pages. These facts

indicate that guidelines must be considered when developing applications for mobile

devices.

In order to save space, precise concise information must be displayed. Using as few words

as possible and making the vocabulary understandable for the user will make the experience

a lot easier than using large amounts of complex words

Techniques for minimizing problems regarding the screen size include:

Information being displayed on a screen should be summarized. Information can be

summarized on one screen with options to view more details on another screen.

When the amount of information is large, using analytical methods to reduce the

amount of information that will be visualized is particularly useful. Examples of this

include clustering.

Words that occur less frequently tend to carry more meaning compared to common

words [11] (Noirhomme-Fraiture 2005).

2.4.2 - Processing Power

Mobile users generally have an urgent need to access information immediately. As such, any

problems with an application or interruptions in service can result in high levels of

frustration. Applications must load quickly and must require low amounts of processing

power to ensure a good user experience.

Mobile devices have less processing power than computers. Current top processor for

mobile phones is a Quad core 1500 MHz processor on the Samsung Galaxy S III. This is a

large amount of processing power for a mobile device but still doesn’t compare to a

computer where the average laptop processor is the Intel i5-2450M 2.50GHz in the HP DV7

[12](buydig, 2012).


2.4.3 Context

Context is the circumstances that form the setting for an event [13] (oxford dictionaries).

For example, computers are used mostly at a desk. Since mobile devices are with their user

for the majority of the day, location plays a role in defining their context of use. When

designing an application for a mobile device it is important that the user can use the device

anywhere and at any time. To achieve this, statistics of where and when people use their

mobile device must be taken into account.

Figure 2.6 – Mobile context usage. [14] (Veale, 2012)

People use their mobile phones to access the internet in various places and at multiple

times. Figure 2.6 shows the places where people use their mobile phones. Mobile

applications should be suitable for users to use in these scenarios. For example, a user using

a mobile phone to check a bus time might be walking to a bus stop. This would require the

application to have a very simple design and return the information very quickly as the user

is trying to walk.


2.5 - Mobile Usability

“The mobile space is the new Wild West of technology ” [15] (Madrigal, 2010).

Users from all over the world are discovering different way of using and interacting with

their mobile devices and integrating them with their daily lives. Developers from small

teams or even working solo can create mobile web applications that have the potential to

launch the developers into tech giants. A new set of usability practices follow this new era of

innovation as De Demetrius Madrigal explains:

“Accompanying this new era of innovation is a new set of usability concerns for software

that runs on mobile devices small enough to fit in your pocket, which you can use while

simultaneously walking around and interacting with the world around you” [15] (Madrigal,

2010).

There are two main mobile usability issues:

Small Screens: In the mobile environment everything must be small and simple. It is

difficult to implement this as some websites can contain large amounts of data. This

data must be summarized and laid out so that users can understand the data with

ease. The size of the screen also has a major impact on navigating through

applications. Complex menus and panels are not very user friendly on small screens.

Difficult Input: Inputting data can prove difficult with the usage of “soft keyboards”

on mobile devices. There is also a limitation on the range of available keys which can

be displayed on a mobile device at one time [16](Ux Movement, 2011). This issue

can be affected by the context of use. For example, it is more difficult to tpye on a

mobile keyboard when walking compared to when sitting down.

2.5.1 - User Interactivity

User Interactivity is a major factor to consider when developing applications for mobile

devices. It describes how a user will navigate and interact with the features of the

application. Because only small amounts of information can be displayed on the screen,

when there is large amounts of data the solution is to split the data onto several screens.

Navigation and orientation problems arise when splitting data onto several screens.


2.5.2 - Navigation

To insure easy navigation many developers use responsive menus. Responsive menus

present themselves differently on different devices and screen sizes. This makes them very

attractive for applications that will be viewed on desktops, tablets and mobiles. They can be

implemented using CSS or other languages such as PHP.

Navigation on mobile devices has to be tapped on. The thumb is significantly larger than the

mouse therefore the navigation links may have to be larger. Smaller touch screens are more

difficult for users to hit compared to large ones. Making icons and buttons makes it easier

for users to interact with the application. But the difficult question is, “how big should they

be? [17] (Anthony T, 2012)”.

The most common finger used by users on mobile devices is the thumb. According to an MIT

study, 45 -57 pixels is the average width of a user’s finger (Dandekar 2003).The average

thumb size would be a little bit bigger so that should be taken into account as well [17]

(Anthony T 2012).

These factors must be taken into account when developing a mobile web application if good

user experience is required.

2.6.0 - Technology Analysis

Research into the different web technologies was carried out for this project. This involved

researching and analysing the technologies that will be used. The technologies that will be

used in relation to this project are HTML5, JavaScript and the use of a JavaScript library.

2.6.1 - HTML5

HyperText Markup Language (HTML) is the markup language for the World Wide Web. It

was designed to semantically describe scientific documents [18] (W3C, 2012). HTML5 is the

latest evolution of HTML.

HTML5 was designed to be used by all Open Web developers. HTML5 technologies can be

classified into several groups based on how they work and what they do.


Figure 2.7 – The HTML5 logo followed by the icons for each technology group.

From left to right these are:

Connectivity: Web sockets can be used to create a permanent connection between

the client and the server. Events can be sent by the server without a request from

the client. RTC or Real Time Connections allow connections with people inside the

browser, e.g. video conferencing.

Styling – CSS has been extended to allow more complex designs to be developed.

This includes features such as

Animations for animating elements.

Background styling, e.g. drop shadows can be put on elements

Typography improvements such as text shadows and

typefaces can be downloaded.

New layouts have been added, e.g. CSS flexible box layout.

Device access – HTML5 allows access to the device’s components. This includes:

Geo-location – Browsers can detect the device’s location.

Camera API – Ability to access the device’s camera.

Touch events – Browser can handle touch events for touch

screen devices.

3D graphics – The <canvas> tag allows the drawing of graphs and objects. WebGL

(web graphics library) enables the use of OpenGl (open graphics library) to being 3D

graphics to the web.

Multimedia - <audio> and <video> tags allow audio and video files to be embedded

into web pages. The camera API also allows the use, manipulation and store of

images from the devices camera.

Performance and integration – A new generation of JavaScript engines and

compilers and full screen API which controls the usage of the web page without the

browser UI being displayed.

Semantics – Content can be described better. An improvement into forms and basic

tags such as <nav>, <hgroup> and <aside>.

Offline and Storage – Browsers have more access to local storage. Websites have

the ability to have some level of offline support [19] (Mozilla, 2012).


2.6.2 - Javascript

The Javascript API allows web developers to run scripts on client’s browsers to provide

client-side functionality. HTML is stateless which means that it requires a full page request

for a change to be performed. Javascript can alter HTML pages while the client is still

viewing them, without the need of a page request.

Javascript enables interaction with the Document Object Model (hierarchy of html elements

on the page) of a HTML page. This allows events to be controlled, styling to be changed,

elements to be repositioned and more complex interactions with HTML5 elements such as

canvas without the page reloading [20] (Smith, 2012).

2.6.3 -Javascript Libraries

Javascript functionality can be enhanced dramatically by the use of external libraries. These

are Javascript pages that are developed by other developers and contain complex functions

that enhance applications.

Research was carried out on the existing Javascript libraries that could be used for

developing an application for data visualization.

2.6.3.1 - JQuery Mobile

JQuery Mobile is a Javascript library that is powered by jQuery. It is a useful tool for web

designers and web app developers. JQuery Mobile enhances HTML and CSS making less

capable phones able to browse content without any problems. The main process of

implementing functionality is with HTML and CSS. JQTouch creates responsive designs that

adapt to a user’s device based on its screen resolution [21] (Hadlock, 2012).

2.6.3.2 - Kendo UI

Kendo UI is another powerful Javascript library used for developing web applications with a

native feel. Features of Kendo UI include a rich data visualization framework, mobile

framework and tools for HTML5 app development such as animations, UI widgets, Data

Binding, and drag and drop [22] (Kendo UI, 2012).


2.6.3.3 – Sencha

Sencha Inc. is a company that have introduced several Javascript frameworks. These include

Sencha EXT. JS and Sencha Touch. The framework that will be used for the development of

this project is Sencha Touch.

Sencha Touch is a framework that is used to develop mobile web applications and native

mobile applications. Sencha Touch is aimed more towards software developers and has a

pure java script API. It has a MVC structure and uses HTML5. A wider range of features is

offered by Sencha Touch in comparison to jQTouch. These include the Sencha Touch Charts

that is relevant to developing a data visualization application, animations and user friendly

touch events [23] (Sencha Inc. 2012).

Various tutorials were completed to become familiar with the library before beginning the

application. A note application was developed. This allows users to create, edit and delete

notes. The notes are stored in the browsers local storage. The application was built with the

aid of “Sencha Touch Cookbook” by Jorge Ramon [27].

Figure 2.8 – A note application developed to become familiar with the Sencha library [27].


3.0 - Requirements

Prior to the development of the application, requirements for the application must be

gathered. These requirements may be divided into the functional requirements and the

non-functional requirements.

When visualizing data it must be “organised, aggregated, filtered, grouped and sorted based

on the business rules to become coherent information” [28](Landry 2012). The information

should be laid out and displayed in a manner that can be understood quickly and easily.

Due to the different mobile platforms (Android, IOS, Symbian and Blackberry) and the

overwhelming number of browsers available, an approach is to develop a visualization

application in HTML5 and Javascript so it can be used on almost all the different types of

mobile platforms and browsers. In relation to native applications, the Sencha Touch

framework provides a feature to export applications in native form. This eliminates the need

to develop a native application for different platforms (e.g. Android, IOS).

The requirements for this project were gathered from two concepts. The requirements for

this application were gathered by a combination of two concepts. These two concepts each

require their own specific requirements.

1. Data visualization – The application is required to visualize a large amount of data so

that it is easy to understand and is visually appealing. Data visualization is becoming

more and more popular. This is because data visualization applications “are great

tools to help individuals use the vast amounts of data available to help them come to

a decision” [38] (Larson, 2012).

2. Mobile application – The application is required to adapt to multiple device types.

Visualizing data on multiple devices is becoming more popular. It is expected that

“40 percent of the workforce will be mobile by 2016, with two-thirds of mobile

workers using smartphones. By 2018, 70 percent of the mobile workforce is

expected to use a tablet” [39] (Sage ERP Team, 2012).

3.1 - User Requirements

A user required the application to allow them to understand large amounts of information

quickly and with ease. They will be able to view the visualization of the two data sets in an

efficient way and will also be able to view the original data in a table. The visualization will

retrieve the data from two sources; a JSON file and a database stored online and will

manipulate charts in HTML5 by using JavaScript and the Sencha Touch library.

The application must allow the user to interact with the charts. This includes zooming in and

out of charts, swiping to pan across data and tapping to dive into the content. The data

comes to life with every tap, swipe and zoom.


A UML (Unified Modelling Language) use case diagram was drawn up in conjunction with

the research into the relevant actions that a user can perform. These are:

Selecting a country to view the data relative to it.

Navigate through the charts for an individual country. This is an extension on the

action of selecting a country and viewing its data.

Selecting multiple countries to compare their data.

Viewing help or information on each page of the application.

It also shows what the store (section of application that holds data) for the application and

the tasks it performs. For example, retrieving the relevant data and updating the charts.

3.1.1 - UML - Use Case Diagram

Figure 3.1 – Use Case Diagram showing actions a user can perform on the application.


3.2 - Functional Requirements

The functional requirements are “the intended behaviour of the system. This behaviour may be expressed as services, tasks or functions the system is required to perform” [24] (Malan, 2001).

The function of the application is to visualize two sets of data to a user in a clear and effective way. The application is required to allow the user to view what they want and how they want to see it.

The application would provide a list of countries to the user. When a country is selected, data from the two data sets relevant to the selected country is visualized in a form of multiple charts. In order to achieve this, first the data must be retrieved by the application. To demonstrate the variety of methods of retrieving data, the application will read the data from two different sources.

Once the data has been retrieved, it must be displayed in multiple charts. The application must also include a form of user interactivity to interact and navigate through the charts. This may be a collection of pages controlled by a menu or tabbed panel or ever a group of pages contained indie a carousel.

To visualize the data the application uses the chart integration included in the Sencha Touch library. This offers many different types of graphs and charts that can capture data and visualize it across multiple devices.

Figure 3.2 – A bar / column chart in the Sencha Touch Library


3.3 - Non- Functional Requirements

Non-functional requirements describe system attributes such as security, reliability, maintainability, scalability, and usability [25] (Leffingwell, 2013).

To overcome the challenges of visualizing data on mobile devices certain techniques must be introduced. For example, due to the huge difference in screen size between personal computers and mobile devices, considerations for interactivity and the user interface must be examined. This includes navigation, user interactivity and the actual design of the interface.

Due to the small screen size visualizations should be confined to simple chart, e.g. bar charts and line graphs. Combining multiple visualizations can make it difficult for the user to view a specific one and can waste time by forcing the user to zoom to view the data.

Typically users want the information with no delay and due to the smaller processing power in mobile devices the loading of visualizations can take some time. This delay can be minimized by adding code optimization techniques into the application. Code “optimization is the process of transforming a piece of code to make more efficient (either in terms of time or space) without changing its output or side-effects” *26+ (Johnson, 2008).In result, the application runs quicker and uses less processing power.

When users are accessing information they usually would like to perform an action as soon as possible. If a system contains multiple visualizations navigating through them can be inefficient and costly in terms of time. This can be eliminated by designing a simple and effective navigation system. This would include allowing the user to search for a specific data set and using the carousel (album cover flow) similar to the iPhone interface to navigate through different visualizations.

Figure 3.3 –Example of a Carousel interface


3.4 - Feasibility Study

The goal of the project is to develop a web application that reads data from different sources and graphically represents the data in the most efficient form. The application must be compatible on mobile devices also. Extensive research was done in the Sencha Touch library in order to develop the application.

Throughout the course of the development of the application some setbacks are expected. This may be due to a number of reasons e.g. a problem may occur and there is no solution in the resources or documentation. It is useful to identify possible setbacks and how to avoid possible setbacks prior to development of the application.

Possible Setbacks

There is a vast amount of mobile devices and each device has a different screen size. This can produce problems as applications can look well on one device but not so well on another. It is expected to be difficult to create a successful visualization that functions and is understandable even on a small screen size. Different techniques will be researched to deal with the problem.

The Sencha Touch library is a new library and has been recently updated (November 2012). There are very few resources (books, documentation) for the latest version of the library which presents a big challenge for developers.

Avoiding Setbacks

Constants testing throughout the implementation can identify issues early, before they become a major issue.

Saving and backing up the application after every feature has been developed is useful as if a problem is encountered the developer has not lost a lot of work.

Storing links for useful tutorials from the beginning of the development stage can be useful. This is expected to help if a problem arises with a library and there is no support in the available resources or documentation.

3.5 - Project Plan

The project plan was divided into three sections. These sections are: Research, Design,

Implementation and Testing.


3.5.1 - Research

Research has a large role in the development of this project. The project focuses on three areas that required major research.

1. Data Visualization – Different techniques to visualize data that is understood with ease and is entertaining will be examined. Techniques include using different colours and shapes to display the data. Decisions also must be made on what charts or graphs to use depending on what data is being visualized

2. Mobile Environment - The mobile environment must be researched. This included handling the challenges that come with it such as small screen size and less processing power. Mobile usability and user interaction must be examined as well. This includes good navigation in the application.

3. Mobile Usability – Research must be carried out on how the UI (user interface) and user interactivity is designed. The application must be simple and provide a good user experience.

3.5.2 - Implementation

The implementation stage of the project is the stage where the application is actually developed. The applications features will be broken down and developed individually.

3.5.3 - Testing

Throughout the implementation phase, unit testing will be carried out on the functionality of the application. To ensure the functionality is correctly developed, basic tasks will be attempted and the application will be broken down to understand the error handling that needs to be developed.

Unit Testing

Testing of application will follow the Unit testing methodology. Unit testing is the process of isolating the application into different parts and testing them individually to verify they are working. The project’s test plan:

Examine the requirements and specifications of the application.

The application will be broken down and each part of the application will tested to verify that the application is working properly.

Upon completion of the implementation the testing will focus on the way that the application operated on mobile devices. Necessary surveys will be carried out along with the testing of users. Time and enjoyment will be the main focus and a conclusion will be conjugated from this.


28

4.0 - Design

The web application is required to display a large amount of data visually to a user on a

mobile device. The visual representation of the data must be aesthetically pleasing and

easily understood. To achieve this, implementation of good design techniques are required.

The application is required to output various charts based on information retrieved from a

JSON (JavaScript Object Notation) and a database. These charts are expected to provide

user interaction. This includes resizing, panning, zooming and tapping to dive into the

content. To achieve this, gestures must be recognized by the application and it must act

accordingly.

The application’s design is required to be simple and easy for the user to understand the

content that is on each page. The application follows a Model-View-Controller (MVC)

pattern. This is an architecture that uses models (data), views (pages on the screen) and

controllers (handles the input of data and changing views).

4.1 - Overall Architecture

The application follows a MVC-like pattern. MVC stands for Model-View-Controller and is a

concept of organising the application’s files in a way that allows developers to write code

that is more maintainable. The pattern proposes three main components or objects to be

used to do this.

Figure 4.1 - MVC structure [29]


29

However in the Sencha library the anatomy of applications is extended slightly. The application

is a collection of Models, Views, Controllers, Stores and Profiles.

Figure 4.2 - Sencha Touch Extended MVC structure with the store and profile [30]

4.1.1 - Models

A model is an entity that is a collection of fields and their data (E.g. a User model would contain fields such as name, email address and password). In the Sencha library, models are typically used with Stores to view data through a component. Models are created by extending the Ext.data.Model class and adding fields to the

configuration of the class.

Figure 4.3 – Creating a model in Sencha Touch


30

There are four principal parts to the Model class Ext.data.Model. 1. Fields – These are the different variables that make up the model. E.g. A person will have a name, date of birth, mother and father.

2. Proxies – Proxies can be used to load and store data. These can be client or server side. An example is Local storage which uses the HTML5 local storage feature.

3. Associations - Models can be linked to other models through associations. These links form relationships and set up how they relate to each other. There are two types of associations, they are hasMany and belongsTo.

4. Validations – These are used to validate data in different ways. This could be to make sure an age is an integer or a name is not empty. There is one model that this application uses and it is called “Country”. This country model

defines how each country is structured. It has the following fields, Name, 2005, 2006, 2007,

2008, 2009, 2010. The year fields (2005 – 2010) hold a value. This will either be the number

of cell phones in that country or the population depending on the Store [31].

4.1.1.1 - Proxies

Proxies are used by Stores to load and save data of a model. There are two types of proxies,

client and server. Client proxies are used for storing data in the browsers memory and local

storage (HTML5 feature). Server proxies work with data and some remote server. Examples

of these are Ajax, JsonP and Rest. Proxies can be defined in the Store or in the Model class.

It is recommended to define a proxy in the model class. However in this project, data is

need from two different sources. These two sources require separate proxies [31].

4.1.1.2 - Associations Associations are used when defining relationships between models. An example of how and

why models would be defined is a blog application. There would be a User, A Post and a

Comment model. They all relate to each other in different ways. For instance a Post would

use the hasMany association to define the relationship between itself and the Comment

class. This is done because each post can have multiple comments attached to it. The post

model would also have the belongsTo association to indicate that each post belongs to a

user [31].


31

4.2 - Views

From the user’s point of view, an application is a collection of views. Although main

functionality of applications is contained in the Models and Controllers, Views are what

users interact with directly. A view is the way in which the application displays information

and data to the user. This can be through the use of components such as charts or images.

Views can also be displayed inside other views.

The application has multiple views with the most important one being the main view that

contains a list view on the left and multiple chart views on the right. The list view is a list

that is populated by a JSON file. The chart views visualize the data by putting the data from

the JSON file and a database into various charts [32].

It was created like this.

Figure 4.4 – Creating a View


32

4.3 - Controllers

Controllers are the glue that sticks the application together. They are essentially event listeners because they are passed events fired by the user interface and take some action on them. There are usually multiple controllers in an application. For example, in an application where users are required to log in using a log in form, the view would be the form itself. The view would have a listener that fires an event to the controller when the submit button is clicked. The controller should perform an action when a tap even is fired [33]. An application automatically initializes a controller and keeps a reference to it. Typically controllers are named after a thing or an object in an application (usually a Model). For example a shopping application might have controllers for Products, Customers and Orders. [33].This application has a main container that listens for events on the main view and its components such as the list of countries. When a country is selected from the list the list view fires an event to the controller so it can take action. At the top of a controller, it stores references to all the pages that it will use, whether receiving an event from one or performing some action on one.

4.3.1 - Launching In an application’s launch process there are four main phases. Two of these phases are inside a Controller. The init (initialise) function in each controller is called first. Secondly the application and profile launch functions are called. The last phase of the process is the controllers launch function [33]. 1. Controller initialise function

2. Profile launch function

3. Application launch function

4. Controller launch function


33

Figure 4.5 – Controller with references and controls at the top followed by the two

initialize methods.


34

4.4 - Stores

Stores are an extra part of the MVC-like pattern that the Sencha library provides. In simple terms a Store is an array of model instances or a collection of model objects (e.g. a Store for a social network application would contain a collection of user models). Setting up a Store and loading its data is done as shown in figure 17. The Store is given a model that it will associate with and the type of proxy that will be used to load the data [34].

Figure 4.6 – Create a basic store

4.5 - Profiles

One of the requirements of this project is that it should work correctly on a variety of devices. This goes from a small android device to a large tablet. These devices had a wide range of screen specifications. Mobile applications tend to be used by people when out of the house and information is required very rapidly. Tablets usually are used when the user has a little bit more time and is looking for a more entertaining application design. Profiles allow applications to look and behave differently when used on different devices.

The layout if the application will be different depending on what device it is being accessed

by. The mobile profile will be more compact with a smaller font. The tablet profile will have

an ever present list on the left with the chart views on the right [35].


35

4.6 - User Interface Design

The user interface will look and act differently depending on the device that the application is being accessed on. According to a study carried out in London by the Jakob Nielson and Raluca Budiu, it takes longer for a user to find specific information on current phones compared to phones in 2000. This was due to the fact that there being too much data on mobile sites. Users were either unable to find the desired information or got distracted in the process [36] (Nielson, 2012).

Figure 4.7 - Nielson Norman Group Test for accessing information on mobile devices.

4.6.1 - Mobile Design

Based on the results in Figure 4.7 this application’s design for a mobile screen will be very

simple. This includes a list on the left of the screen that is populated by country names. The

right side of the screen is occupied by the chart view. This will display charts when a country

is selected.

Figure 4.8 – Application home screen design for mobile devices.


36

4.6.2 Tablet Design

The design for the tablet is similar with the list on the left and chart view on the right. The

chart view will fill the majority of the screen. This will result in a more detailed chart. The

home screen contains an image indicating the data that the application deals with.

Figure 4.9 – Home screen design for tablet


37

4.7 - Navigation

The navigation in the application consists of selecting a country in the list and navigating through different charts and statistics. Two navigation techniques had to be decided on to satisfy the user experience in the application. The first one was the country list and the second is displaying the different charts. Due to the significantly smaller screen on the mobile device, it was decided that the list would not be visible when the application first loads. A button in the toolbar at the top of the screen would activate the list when tapped. When the button is tapped again the list would disappear. However on the tablet there is more space on the screen therefore the list would remain on the screen permanently. Navigating through the different charts is an important factor to be considered. The two

proposed navigation techniques are a tabbed panel at the bottom or a carousel approach

which is used by IPod’s to navigate through album covers.

Figure 4.10 - Navigating through the charts with a tabbed panel (Navigation 1).


38

4.7.1 - Second Navigation

The second navigation idea proposed is the carousel approach. This navigation relies on the

use of certain gestures such as swipe left or swipe right. The view will change depending on

which direction the user swipes the screen.

Figure 4.11 – the carousel approach.

Figure 4.12 - Carousel navigation. The red circle shows how many views there are and

which one is the current view.


39

5.0 - Implementation

The implementation stage of the project was when the project plans, designs, techniques

and requirements were developed. The Sencha Touch library was installed and set up. Each

feature of the application was developed one after another. The project was saved and

backed up after each feature was completed.

5.1 - Development Process

The Rapid Application Development (RAD) process was used in developing this project.

During various stages of the year deliverables were handed to the project supervisor. These

began with a project proposal, which outlined the idea of the project. This was followed by a

requirements document which outlined the application’s functional and non-functional

requirements. A research document was compiled which included a collection of all the

background research of the project. An outline design document and prototype was

developed followed by a detailed design document which described how the application

would be structured and designed. The implementation was completed and the application

was tested and updated accordingly.

5.2 - Project Plan / Management

Proposal September 2012

Requirements October 2012

Research & Analysis December 2012

Prototype Presentation December 2012

Detailed Design January 2013

Implementation & Testing February 2013


40

5.3 - Sencha Touch Installation

In order to begin developing a web application in Sencha Touch, certain prerequisites are

required. The Sencha Touch 2.1 SDK and the Sencha CMD had to be downloaded and

installed, a local web server was installed (Xampp) and a modern web-kid web browser was

installed (Google chrome).

The Sencha Touch 2.1 SDK was extracted and placed in a folder that could be accessed by

the local web server. The Sencha CMD was installed. This adds the “sencha” command line

tool to the SDK. This allowed application templates to be created and deployed. The

application was created by using the command line “sencha gen app app-name ../app-

folder” inside the Sencha Touch SDK directory.


41

Fig. 5.1 – Sencha CMD creating an application

This created a skeleton Sencha Touch 2.1 MVC application. An index html age was created

and linked to the Sencha Touch library. The app.js file contained links to all the JavaScript

files in the MVC folders (Models, Views, Controller and Stores).

Fig.5.2 – Folder Structure


42

5.4 - Development

Because the main functionality of the application was to visualize data, the first stage of

development was a chart. This chart would use a store to read data from an external JSON

file. This data contained the number of cell phones in each country for the years 2001 -

2010. The chart was developed by using the chart component class that is built into the

Sencha Touch library. The chart consisted of a series of grouped bars with each bar

representing a year and each group of bars representing a country. User interaction was

developed for the chart. This included panning, zooming and a toggle button to switch

between them.

Fig. 5.3 – Chart displaying data from a JSON file

To demonstrate the ability of retrieving data in different ways, another set of data was read

from a mySQL database. A proxy was set up in the store that used a PHP script to access the

mySQL database with the use of necessary PHP classes and functions.

5.4.1 - JSON – Cell Phone Store

An Ajax proxy was set up in the cell phone Store. This uses Ajax requests to load country

data from a JSON file. This is the most widely used way of retrieving data. A JSON reader

was set up to read the retrieved data and decode it so it can be added to the store.


43

Figure 5.4 –JSON file returned by proxy

5.4.2 - PHP – Population Store

The Population data was stored in a database. In order for the population store to retrieve

the data an AJAX request was set up in the store and it called a PHP function that accessed

the database. To allow the application to access the database a PHP class had to be

implemented. This was similar to the Country Model that was implemented in the

application itself. The PHP class used a PHP Data Access Object which contained a function

that read the data from the database.

Figure 5.5 - PHP Data Access Object getting information from database


44

In order for the application to understand the data that is being read from the database it

had to be structured in a specific way. The PHP script that the application calls structures

the data in a way that makes it similar to a JSON file. This can then be read by the

application and presented in a visual graph. Below is a simplified version of the script that

uses the Data Access Object to retrieve the data and structure it in a JSON manner. It wraps

the data as JSON elements and puts them into an array. The array is then made as one long

string and sent to the application.

Figure 5.6 - PHP code that is called by store to get the countries. This uses the Data Access

Object above to get the data and sends the information in a form that Sencha Touch can

understand (JSON). The result will be similar to Figure 7.


45

5.5 - Layout

The application contains multiple views. A main view was created with two separate views

inside it, the list view and the chart view. The list view is populated by the country names

retrieved from the JSON file. The list had an “onLeafTap” listener that called a function

every time a country was selected. This function removed the data of the previous country

from the store and added data about the selected country. The “store.sync()” function was

called to reload and sync the store. This resulted in the chart animating to visualize the

newly added data for the selected country.

Fig. 5.7 – List of countries and chart displaying selected country’s data


46

5.6 - Selecting a Country

Countries are selected by tapping the country name in the list. This calls a “countryTap”

function in the controller and is passed two parameters (nested list and record). The second

parameter is the name of the country that was selected. Because the mobile phone data

and population data are retrieved from two different sources (JSON file, mySQL database) a

new store was created (called PopAndPhone) to hold both sets of data.

Fig. 5.8 – The PopAndPhone store that holds the selected country’s data


47

The PopAndPhone store holds data for the selected country and every time the

“countryTap” function is called the data is removed and the new selected country data is

added. After the data has been added the PopAndPhone.sync() is called which updated the

data in the charts.

Fig. 5.9 – the countryTap function that loads the selected country’s data


48

5.7.0 - Carousel

A carousel that contained multiple charts was implemented and added into the main view.

Swiping left or right allows allowed the user to switch between the different charts.

The charts use the PopAndPhone store to combine the mobile phone data and population

data. This was done in a bar chart, line chart and a pie chart.

Fig. 5.10 – Code for setting up the carousel with the three charts

Fig. 5.11 – Main view showing the list and the carousel with the bar chart active


49

Fig. 5.12 – Main view showing the list view and carousel with the line chart active

5.8 - Pie Chart

For the purpose of visualizing data in a variety of forms a Pie chart was included in the

carousel. The pie chart contained two categories, the number of mobile phones and the

population. A slider was placed above the pie chart that controlled the year that was being

visualized. A function was created that calculated and displayed statistics based on the data

such as the total population and total number of mobile phones.

Fig. 5.13 – Pie chart, slider and statistics


50

5.9 - Update Year

When the slider is moved by the user, the pie chart changed and the statistics are updated

to the data of the current year. This is done by the “LoadPieAtYear” function which was

created in the app.js file. The “LoadPieAtYear” function is called from the pie chart view

each time the slider is moved and is passed one parameter, the year.

Figure 5.14 – Listeners for the slider. Calls loadCompare function when slider dragged or

changed

Up until this point the data for a selected country has been retrieved from a JSON file and a

mySQL database and put in a store called “PopAndPhone”. However the pie chart view

requires data from a selected year of the selected country. A new store was created to hold

the data for an individual year of the selected country. This store was called “YearStore”.

The following function takes the data from the PopAndPhoneStore at the selected year and

adds that data into the YearStore in two elements. The first element is the population data

and the second element is the phone data.


51

Fig. 5.15 – Function that updates data for the pie chart and statistcis

5.10 -Statistics

The “getStats” function is called from the “LoadPieAtYear” function. It uses the population

and phone values from the active year and previous year to calculate various statistics. The

statistics that are calculates are:

Total population of the country.

Percentage increase or decrease in population from the previous year.

Total number of mobile phones in the country.

Percentage of mobile phones in relation to the population.

Percentage increase or decrease in mobile phones from the previous year.


52

Fig. 5.16 – Function that calculates the statistics and adds them to the pie chart view


53

5.11 - Compare Mode

Another element of functionality that was to be included in the application is to be able to

select multiple countries and view their data in a single chart. To achieve this, two views had

to be created. The first view is where the countries are selected and the second is to display

the data in a bar chart.

Figure 5.17 – Compare view where the user has selected Ireland

The user taps on a button to select a country from the list. The colour of the buttons change

to green after a country has been selected. This is to provide feedback to the user that they

have selected a country. A button with an “add” icon is displayed and when tapped provides

the user with the option of selecting a third country to compare. There is a compare button

at the bottom of the page that when tapped, brings the chart to the screen. A validation was

configured to ensure that at least two countries had been selected before displaying the

chart.


54

Figure 5.18 – Switch statement that changes colour of country buttons

5.11.1 - Bar Chart

The following chart is the chart that compares the data of the selected countries. The year is

chosen by a slider.

Figure 5.19 – Bar chart comparing three countries


55

5.11.2 - Compare Store

Two stores were created to manage the data of the countries that were selected. The first

store is called “CompareStore” and it stores the data for each year of the selected countries.

The second store was created and called CompareYearStore. It stores the data for a selected

year of the selected countries. The following function retrieves the data for each selected

country and adds that data to the CompareStore. It then calls the “setCountries” and

“loadCompare” functions from the app.js file.

Figure 5.20 – goCompare function that manages the data of the CompareStore

The “setCountries” and “loadCompare” functions take the data from the CompareStore at

the selected year and adds that data to the CompareYearStore. The setCountries function is

passed the country name and stores the name of each selected country.


56

Figure 5.21 – Creates the countries array in the app.js file

The “loadCompare” function uses this countries array to display the names of the countries

that it is comparing.

Figure 5.22 – loadCompare – Adds CompareStore data to the CompareYearStore


57

5.12 - Adapting to mobile

Due to the significant size difference of mobile screens, when the list view and the chart

view are both visible at the same time it can be difficult for the user to understand the chart

as it seems “squashed”. The title bar at the top of the screen is full of icons and button that

there is no room for the country name. To avoid this problem a button was included above

the list that when clicked, the list will be hidden and the chart will stretch across the full

screen. The “Ext.ComponentQuery” was used in this process. It searches through the active

views for a list component with a specified id and when found the “list.hide()” function

hides the list from the view. A button appears on the top left of the screen when the list is

hidden. When this button is tapped, the list of countries is shown again.

Figure 5.23 - Searches for the list component and stores a reference to it in the list variable

Figure 5.24 - List view and Chart view both visible on mobile screen

Figure 5.25 - List view hidden, more room for chart view


58

5.13 - Sub Menu

However as the application became more advanced, there was a need to develop a simple

user interface with minimal icons and buttons. The proposed and decided idea was to add a

sub menu bar which included the icons for various actions. The sub menu would be

represented by a down-arrow located at the top-right of the screen.

This sub bar would contain buttons such as the home icon, the compare button and the info

/ help icon.

Figure 5.26 – The sub menu with the various buttons.

The background of the title bars and sub menu was set to a dark blue and the navigation

arrows and menu icons were set to white. This gave the application an effective colour

contrast and ensured that all of the buttons and icons were clearly visible.

The colours representing the population and mobile phones were kept the same throughout

all the charts. They were also included in the statistics as the text was changed to the same

colour. It was also included in the popup panel that displayed when a chart was tapped.

White arrows were also included on either side of the country name. These arrows

navigated the user through the different charts when tapped. A list icon was also added on

the top left of the screen. This list icon shows the list of country names when tapped.

Figure 5.27 – Title bar with the list icon on the left, navigation arrows on either side of the

country name and the sub menu arrow on the right.


59

5.14 - Information / Help

Information/help icons were included on every page of the application. This was to provide

information of certain elements on the page to the user to alleviate confusion or

misunderstanding. When the help icon is tapped an alert box appears in the middle of the

screen. This alert box provides the user with information regarding the page they are on,

what they can do on the page and how to navigate away from it. The Sencha

“Ext.MessageBox” class was used to display the help message to the user.

Figure 5.28 – Switch statement to check active chart and display the correct help message

Figure 5.29 – Ext.MessageBox displaying the help message in the bar chart


60

5.15 - Issues

During the implantation of this project certain setbacks occurred.

5.15.1 – Selecting a Bar

User interactivity is an important aspect of touch screen applications. The application was

required to display information about a country when a bar on the chart is tapped. After

using examples from the Sencha Touch website and various tutorials, errors still occurred.

After some research into the problem, it was found that numerous developers had had the

same problem.

http://docs.sencha.com/touch/2-1/#!/guide/drawing_and_charting-section-5

http://stackoverflow.com/questions/14493076/itemtap-event-not-firing-on-all-taps

(http://www.sencha.com/forum/showthread.php?252708-Sencha-touch-chart-2.1-

iteminfo-not-working)

Figure 5.30 – Item tap return an empty popup

Figure 5.31 – Errors displayed in the console after itemtap was called

The error that was displayed indicated that the tapped item was not defined when the

popup function (shows popup with item data) was called. With much experimentation, a

solution was found. The item’s data was stored in an array and the array was then passed to

the popup function.

http://stackoverflow.com/questions/14493076/itemtap-event-not-firing-on-all-taps


61

Figure 5.32 – Solution – The item was stored in a new array and then passed to the

function

This resulted in the following:

Figure 5.33 – Popup displaying the data of the tapped item

The text regarding the population and the number of mobile phones was set to the same

colour as the elements in the charts that represent that data. This is to aid the user when

reading the text.


62

5.15.2 - Grouped By Region

The country list in the application listed the countries by name in alphabetical order. In

addition to this, it was required that the list would group the countries by region (e.g. UK,

Ireland and Germany would be under the Europe field whereas Mexico and USA would be

under Americas).

To successfully implement this requirement, the store containing the countries had to be

changed to a TreeStore and the country list had to be changed into a NestedList.

An attempt was made at this through the use of the Sencha Docs (REF). This nested list

displayed the regions and countries successfully. However when a country was selected, the

“countryTap” function was not being called for an unknown reason.

A different example was found where the task is explained better

(http://www.mysamplecode.com/2012/08/sencha-touch-nested-list.html). However there

has been insufficient time to make another attempt.

5.15.3 - Production Build

Upon completion of the implementation of the application, it must be deployed using the

CMD (Sencha command line tool). This will essentially export the application making it faster

and smaller in size. The command “Sencha app build production” is used in the CMD to do

this.

Sencha provides 5 different basic builds however it is recommended to create a custom

build when deploying an application. This is because the build will only contain the classes

that are being used by the application, thus saving download time. It also then minifies the

application so it's as small as possible.

A guide to deploying applications is supplied in the Sencha online documentation

(http://docs.sencha.com/touch/2-1/#!/guide/command_app-section-6). However, after

following this guide and various others, there has been a problem in deploying this

application.

http://www.mysamplecode.com/2012/08/sencha-touch-nested-list.html


63

Figure 5.34 – Error in deploying application.


64

6.0 - Testing

Unit testing was carried out throughout the implementation of the application. When

implementing individual features of the application, the JavaScript function “console.log(); “

was used to output messages and values of variables and objects to the console. This was

done to ensure variables were defined and contained the correct values.

For example, when a country is selected, the data must be found from the Countries store

and added into the PopAndPhone store. The console.log() function was used to display

“Match” when the country was found in the countries store and the data was displayed to

ensure it was correct country.

Figure 6.1 – Displaying message to inform developer that the country was found

Figure 6.2 – When a country is selected, this is what is displayed in the console.

This type of testing was used when implementing each individual feature of the application.


65

6.1 - User Testing

This application was tested in two different ways amongst 17 people. A survey was made

available online and was filled out by 12 people while 5 people participated in an

observation testing session [37]. They also filled out the survey, however their actions and

experience was noted.

In the survey, users were asked to provide details on the device they were using the

application on and their age. They were then asked to view the main page of the application

and explain what they thought the application would do. This was followed by five tasks

which covered each area of the application.

The last section of the survey contained various usability questions asking the user to

provide information about their experience using the application. There were two questions

regarding the ease of use were a user chose a number between 0 – 10. There was a

question on the design of the application, and if the user encountered any errors. The

survey finished with a question asking the user to give any feedback they had.

6.2 – Discussion of Results

Detailed results can be viewed in Appendix A.

After calculating the results there was a mean of 7 out of a possible 10 for ease of use and 7

out of a possible 10 for how quick the user found information they were looking for.

However there were some issues that had previously gone unnoticed which may have

affected the results of the usability test.

1. Some users found the application slow to load.

2. Some users found it difficult to navigate between the charts as they were unaware

that the arrows acted as navigational arrows.

3. Some users assumed that swiping a chart would result in a form of navigation. Some

users got the question regarding the percentage of mobile phones wrong. It was

suggested to have the statistics located on the bar chart.

4. The main image was stretched for some of the users (particularly android).


66

6.2.1 - Slow

The application was slow to load due to the fact that it has not been built for production.

This was mentioned in the setbacks of the implementation section. Successfully building the

application for production using the Sencha command line would alleviate this problem.

6.2.2 – Navigational Arrows

Highlighting the navigational arrows and differentiating them from the menu bar arrow

could make then more noticeable. Adding swipe functionality on the chart could minimize

the number of users that found it difficult to navigate between the charts.

6.2.3 – Main Image

On some devices the main image was stretched or did not appear at all. CSS offers a predefined

value for the size of background images. This can be done by adding “cover” or “contain” to the

background size. The “cover” value scales the image to fit the screen while keeping the aspect ratio

of the image.


67

7.0 – Conclusion

When executed correctly data visualization has proven to be extremely effective in making

large amounts of data sets understandable. Data visualization has even proven so solve

major problems such as London’s cholera epidemic in 1855. His visualization of individual

cases revealed a link between them [3] (Mackinlay, 2009).

Edward Tufte’s book “The Visual Display of Quantitative Information” paved way for

creating visualizations for computers. Apple shortly released their computer with based

itself on graphics for users to interact with [2] (Few, 2007).

Because the amount of data available on the internet is increasing constantly data

visualizations help filter the useful and useless information. The last number of year has seen a

shift from computers to mobile devices. This has changed the way people access the data on the

internet [8] (Spool, 2011).

This change has presented a need to design visualizations that can be accessed on multiple

devices. However it also brings certain challenges from the significant difference in screen

size to difference in processing power.

Research was carried out in the relevant areas of the project. These include data

visualization, mobile environment, technologies used and mobile usability. Requirements

were gathered from a combination of these areas. The structure and layout of the

application were designed using mobile usability techniques so it could function on multiple

devices. The application was implemented and developed using the Sencha Touch

framework and was tested on a number of users. The results were collected and analysed.

As the Sencha Touch framework is relatively new, the developer became familiar with it in a

few months. This was rewarding, beneficial for the future and improved necessary coding

skills and time management. The following was learned during the course of this project:

Research into specific concepts and theories.

Develop an application using the Sencha Touch library.

Design a user interface for the mobile environment.

Implement a usable and simple interface using mobile usability techniques.

Organise, combine and visualize two large sets of data.

Keep in time with deadline dates.

The application fulfilled the requirements laid out at the beginning of the project. It

successfully visualized data so it could be easily understood. After testing the application on

a number of users, it was found to be easy to use and adapted well on multiple devices.


68

8.0 - References

[1] – Edward Tufte – 1983 – The Visual Display of Quantitative Information

[2] – Stephen Few – 2007 – "PERCEPTUAL EDGE - DATA VISUALIZATION” –

www.perceptualedge.com/articles/Whitepapers/Data_Visualization.pdf

[3] Jock D. Mackinlay, Kevin Winslow - (2009) Designing Great Visualizations -

https://www.google.ie/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&ved=0CC0

QFjAA&url=http%3A%2F%2Fmkt.tableausoftware.com%2Fdownloads%2Fdesigning-great-

visualizations.pdf&ei=xLUzUceFKJCZhQeF2YHwDQ&usg=AFQjCNEU7lUa_MxNnHdP23L5_ITS

lAEUKA&sig2=7b0NaVnohId7cCxGchfGbg&bvm=bv.43148975,d.ZGU

[4] – Vitaly Friedman – 2008 – Data Visualization and Infographics – Smashing Magazine -–

http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-

and-infographics/

[5] – Veronique Greenwood - (2009) - "Getting Past The Pie Chart." - http://seedmagazine.com/content/article/getting_past_the_pie_chart/

[6] - StatSoft - (2012) - Electronic Statistics Textbook - http://www.statsoft.com/textbook/

[7] Joel Laumans – 2009 – An introduction to visualizing data - http://piksels.com/wp-

content/uploads/2009/01/visualizingdata.pdf

[8] – Jared M. Spool - (2011) - Mobile Strategy, Data Visualization, and Design Process - Big

Challenges, Big Rewards. http://www.uie.com/articles/mobile_dataviz_process

[9] – PatientsLikeMe – (2012) - PatientsLikeMe - http://www.patientslikeme.com.

[10] – Phone Arena.com – (2012) - http://www.phonearena.com/phones/Samsung-Galaxy-

S-III_id6330

[11] - Noirhomme-Fraiture, G. C. a. M. (2005) Data Visualizations on small and very small

screens. -

https://docs.google.com/viewer?a=v&q=cache:ouaH65M3tiIJ:citeseerx.ist.psu.edu/viewdoc

/download%3Fdoi%3D10.1.1.97.6330%26rep%3Drep1%26type%3Dpdf+data+visualization+

on+mobile&hl=en&gl=ie&pid=bl&srcid=ADGEESjgLAG-

GD7fQ3PZAHyXetTrYcNZUyvjYCksT2SR6pz0DWQ89-

8IBtiF5IBZfpNGKprKnXd1aJjXjyWff47NI7jZ9tYtbIC_9rZIyM9aDEIykpzMoNPI6QAdhXEtoWGZ

NVxesGKP&sig=AHIEtbT4vDXtwWUNPy85xufk2NnG8mkR9A

[12] - buydig.com - (2012) - "Hewlett Packard Pavilion ".

http://www.buydig.com/shop/product.aspx?sku=HPDV67020US&ref=pricegrabber&omid=1

12

http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-infographics/

http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-infographics/

http://seedmagazine.com/content/article/getting_past_the_pie_chart/


69

[13] - Oxford Dictionaries – http://oxforddictionaries.com/definition/english/context

[14] – Laurence Veale – 2012 – iQcontent - http://www.slideshare.net/iqcontent/mobile-

strategy-mobile-context-13408038

[15] – Madrigal, D. (2010) - Usability for Mobile Devices -

http://www.uxmatters.com/mt/archives/2010/09/usability-for-mobile-devices.php

[16] – Ux Movement - (2011) - "Input Types: Give Users the Right Keyboard on Mobile Forms

- http://uxmovement.com/forms/input-types-give-users-the-right-keyboard-on-mobile-

forms/

[17] - Anthony T (2012) Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes.

Smashing Magazine - http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-

design-ideal-mobile-touchscreen-target-sizes/

[18] – W3C – (2012) - http://dev.w3.org/html5/spec/single-page.html#introduction

[19] – Mozilla Developers – (2012) - https://developer.mozilla.org/en-

US/docs/HTML/HTML5

[20 ] – Devlin Robert Smith – 2012 – An Exploration of HTML5 and Javascript –

https://docs.google.com/viewer?a=v&q=cache:Eyn8-

uVf2DUJ:cs.ru.ac.za/research/g09s0538/RUThesisFinal.pdf+html5+and+javascript+literature

&hl=en&gl=ie&pid=bl&srcid=ADGEEShXA-

bD1i_SU8eBEe_lrto7oPIwCQHAJrS2rX7k9XucYa1xDTYq8rCcqxWesRY4OfdrtVrl4PH5uxOtGX

mVSVMmu1MH2bAoJa10BrcC8cHu1x5S3SdPYb6RolHbJbl_d0o00Q1K&sig=AHIEtbSsc7iLKSkg

hsx6WF5wKLspZ1nsZQ

[21] – Hadlock, K. - (2012) - "Implement responsive design with jQuery Mobile and CSS3." -

https://www.ibm.com/developerworks/mobile/library/mo-jquery-responsive-design/

[22] – Kendo UI – (2012) - "What is Kendo UI." - http://docs.kendoui.com/getting-

started/what-is-kendo

[23] – Sencha Inc. – Sencha Touch – 2012 -

http://www.sencha.com/products/touch/features/

[24] - Ruth Malan and Dana Bredemeyer - Bredemeyer Consulting – 2001 - Functional

Requirements and Use Cases - http://www.bredemeyer.com/pdf_files/functreq.pdf

[25] – Leffingwell – 2013 – Non-functional Requirements Abstract -

http://scaledagileframework.com/nonfunctional-requirements/

[26] - Maggie Johnson - Code Optimization – 2008 -

http://dragonbook.stanford.edu/lecture-notes/Stanford-CS143/20-Optimization.pdf

http://www.slideshare.net/iqcontent/mobile-strategy-mobile-context-13408038

http://www.slideshare.net/iqcontent/mobile-strategy-mobile-context-13408038

http://dev.w3.org/html5/spec/single-page.html#introduction


70

[27] – Jorge Ramon - Sencha Touch Cookbook – 2012 - http://miamicoder.com/sencha-

touch-book/

[28] - Nick Landry. (2012). Windows Phone Data Visualization with Charts in Motion 2012. -

http://www.infragistics.com/community/blogs/nick-landry/archive/2012/07/19/windows-

phone-data-visualization-with-charts-in-motion.aspx

[29] - Google, 2012 - http://developer.chrome.com/apps/app_frameworks.html

[30] – Sencha Docs –Architecture - http://docs.sencha.com/touch/2-1/#!/guide/apps_intro

[31] – Sencha Docs – Models - http://docs.sencha.com/touch/2-1/#!/guide/models

[32] – Sencha Docs - Views - http://docs.sencha.com/touch/2-1/#!/guide/views

[33] – Sencha Docs – Controllers - http://docs.sencha.com/touch/2-1/#!/guide/controllers

[34] – Sencha Docs – Stores - http://docs.sencha.com/touch/2-1/#!/guide/stores

[35] – Sencha Docs – Profiles - http://docs.sencha.com/touch/2-1/#!/guide/profiles

[36] – Jakob Nielson, Raluca Budiu - Usability of Mobile Websites -

http://www.nngroup.com/reports/mobile

[37] – Testing Survey – Darren Hall – 2013 -

https://docs.google.com/forms/d/1dat3XIGuizBQpbV6QhQKoWX_niVO-

hzbT2wA8pzDCEQ/viewform

[38] - Why has Data Visualization become so popular? - TROY LARSON – 2012 -

http://blog.mindjet.com/2012/05/why-has-data-visualization-become-so-popular/

[39] – Mobile business intelligence, big data gaining popularity - The Sage ERP Team – 2012 -

http://blog.sageerpsolutions.com/mobile-business-intelligence-big-data-gaining-popularity/

https://docs.google.com/forms/d/1dat3XIGuizBQpbV6QhQKoWX_niVO-hzbT2wA8pzDCEQ/viewform

https://docs.google.com/forms/d/1dat3XIGuizBQpbV6QhQKoWX_niVO-hzbT2wA8pzDCEQ/viewform


71

9.0 – Appendix

This section includes the relevant documents that were used during the course of this project.

9.1 – Testing Survey

What device are you using the application on? *

Mobile Phone

Tablet

Computer

Other:

What is your age group? *

15 - 20

21 - 25

26 - 30

31 - 40

41 - 59

60 +

Looking at the homepage, what do you think this application will do? *

What was the population of Ireland in 2006? *

What was the percentage of mobile phones in Australia in 2006. *

Compare the following countries: South Africa, UK, Germany. In 2002 were the number of mobile phones in Germany greater than the population in the UK? *

Navigate back and go to the pie chart (of any country). Find the help / info for this page. *

Done

I could not find the help / info


72

Go to the homepage *

Done

I could not find the homepage

How easy did you find this application? *

1 2 3 4 5 6 7 8 9 10

Difficult Select a value from a range from 1,Difficult, to 10,Very easy ,. Very easy

How quickly did you find what you were looking for? *

1 2 3 4 5 6 7 8 9 10

Long time Select a value from a range from 1,Long time, to 10,Very quick,. Fast

Do you like the design of the application? Why?

Do you think the application worked well on the device that you used it on? * If no, please explain. e.g. was slow

Did you encounter any problems or errors? If yes, please explain.


73

Any comments, feedback, things you would change? *

Submit

9.2 – Results

What device are you using the

application on? What is your

age?

Looking at the homepage, what do

you think this application will do?

What was the population of

Ireland in 2006?

Mobile Phone 20 - 25

Tell you how many people have mobile phones is the chosen country 4.7

Computer 20 - 25

Calculate the ratio of mobile phones to people in my country. 4226428

Computer 25 - 30

exactly what it says on the tin! show me the comparison of population to mobile phones, 4226428


Display the ratio of mobile phones to people 4.3 Million


74

Tablet 40 - 60

will give the user information about mobile phone usage and population for different countries 4226428

Tablet 40 - 60

tells me how many people use mobile phones in different countries. 4226428

Tablet 15 - 20

show how much of the population has mobile phones 4.2

Computer 20 - 25

I think it will, depending on what country I select, give me information on population numbers in that country and how many phones each person might have. 4.2 million

Computer 20 - 25 show population differences 4.5


Determine how many people have mobile phone's 4.3million

Computer 20 - 25

Compare the difference between human population and mobile phone population 4.2 million


I found the homepage difficult to get through to but looks like some kind of app 4 million


Compare the number of mobile phones to the population of the selected countries in the app. 4226428

Computer 20 - 25 I really don't know. 4.2 million

Computer 20 - 25

on the basis of the homepage it seems like some kind of gps system 4.2 million


75


Compares the number of mobile phones with the population in each country 4226428

Computer 20 - 25

Display geographical information about population and mobile phones 3865820

What was the percentage of mobile phones in Australia in

2006.

Compare the following countries:

South Africa, UK, Germany. In

2002 were the number of

mobile phones in Germany

greater than the population in

the UK?

Navigate back and go to the

pie chart (of any country). Find the help / info for this page.

Go to the homepage

How easy did you find this application?

19 germany field was empty Done Done 7

0.9 no Done Done 7

95 no Done Done 8

19 Yes Done Done 9


76

0.95 no Done Done 8

0.95 no Done Done 5

19 yes Done Done 8

nearly 100%

the were about equal although the population in the UK was a fration more than the number of phones in Germany Done Done 10

dont know yes Done Done 7

0.95 no Done Done 7

0.197 Equal Done Done 7

0.68 Probably I could not find the help / info

I could not find the homepage 5

0.95 No Done Done 6

0.19 yes Done Done 4

0.57 yes Done Done 8


77

19760000 no Done Done 7

95 no Done Done 6

How quickly did you

find what you were

looking for?

Do you like the design of the application?

Do you think the application

worked well on the device that you used it on?

Did you encounter any problems or

errors? Any comments, feedback, things you would change?

9 yes it looked lovely ;)

was slow, in portrait mode seemed a bit of a squish no ...

9

simple layout and easy to navigate and nice colours

perfectlty smooth no problems none at all more dragons and explosions

9

simple and straightforward, although i wud highlight the top arrows more, and ensure a visible difference in the navigation arrows and the arrow that brings up the info home and compare buttons.

worked perfectly on a laptop no

maybe be able to select the country from the image of the globe aswell as the list. and as above highlight the arrows and the use. no explantion is given about the arrows unless u mess with tehm and find the info button.

9

It uses a color scheme that is easy to look at Yes No Bit more interactive


78

9

There was graphic and numeric information on the subject and it was easy to understand

Yes, even though touch screen is not familiar for me I was able to use it easily no

Is good for a mobile application, and looks like it could be adapted to graphically show various other types of useful information. The comparison feature for selected countries is good and again would be adaptable to other data.

4

Yes. It is easy to read and good colours used.

Yes. Small bit slow. No

Would make the information button and homepage available on each page.

7 yes i like the drop down menus.

yes i think it works well on a tablet

yes i could not find the homepage quickly no

9

It is simplistic and easy to use. I was also able to read the information clearly.

It worked fine, no problems no.

A little more info on how to navigate (i.e between charts and homepage). It took me a second or two to realise, but then again I'm not the brightest.

7

yes. but for chrome just need a cursor element so the user knows they can click on some countries etc. yep nope

add a cursor element for computers users

7 Yes it's colourful and straightforward.

Slow on mobile phone no No

7 Yes Yes No

4

Its simple to use as well as clear and informative

The homepage took a while to come up but all in all, it worked well Not really

The help icon could've been made more clear

7 Simple design, easy enough to navigate.

Worked well, at some stages it didn't resize to fit screen when I rotated mobile.

The "powered by Sancha" label got in the way some times, not a big deal but just so you know.

2 No. yeah no this is so confusing...


79

9

yes, its straight forward and practical yes no the application is excellent

9

Yes. Its well laid out and easy to move through and follow the app. Information on statistics is made readily available.

It was a bit slow to upload at first.

Yes. Sometimes the graphs and info didnt adjust to fit the screen. But overall it worked smoothly.

Well designed and thought out. info is easily found and convenient for users. the graphs are easy to read. only problems were that it was a bit slow to upload sometimes

6

I didn't like how stretched the home page image was Yes

No errors. Was confused on to where to find population and percentage stats though.

Display the stats on the bar chart page too since that is the default view for the stats. Make the buttons to change to pie chart etc easier to see

data visualization on mobile devices. - darren...

Documents