Over a million developers have joined DZone.

Data Visualizations That Rock in Alpha Anywhere

DZone's Guide to

Data Visualizations That Rock in Alpha Anywhere

You can create a wide array of data visualizations for your mobile application, and now, this can be done offline with the JavaScript Chart control.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

Providing analytics through reports or dashboards is a major requirement in many mobile business applications. Having a way to visualize the day-to-day operations at a glance is critical for enterprises. Dashboards are frequently used in applications to provide real-time data visualizations for business information.  This information needs to be accessible everywhere – desktop or mobile – and with or without an internet connection.

Alpha Anywhere has always included support for adding charts to applications and reports, however, these charts were historically only available if the user had a connection.  With the addition of new Javascript Chart control in Alpha Anywhere 4.4, however, you can now add offline mobile charting to your Alpha Anywhere applications.

The Javascript Chart control operates 100% on the client, eliminating the need for the Application Server to render the control.  This makes it possible to dynamically generate charts in offline applications using data in List controls, client-side Data Series, or a local SQLite database. Client-side charts are also faster than the traditional server-side charts since they do not require an Ajax callback to download data from a remote server.

Alpha Anywhere’s Javascript Charts utilize the RGraph library, which offers a wide variety of options for styling charts using CSS. Multiple chart types and data series can also be combined into a single chart, giving you more power and flexibility to create the data visualizations needed in your business applications. Sample charts are available out-of-the-box such as the chart shown below, providing a starting point for building custom charts to meet the needs of your clients.


The Javascript Chart can be used to add one or more of the following types of charts to your Alpha Anywhere application. Some chart types listed are only available using the Javascript Chart control:

  • Bar Charts.
  • Line Charts.
  • Pie Charts.
  • Radar Charts.
  • Semi-circular Progress Charts.
  • Horizontal and Vertical Progress Charts.
  • Waterfall Charts.
  • Scatter Plots.

SemiCircularNumberDisplay Control

In addition to the Javascript Chart control, another control was added to make creating semi-circular progress charts: the SemiCircularNumberDisplay control. This control can be used to add gauge-like controls to an Alpha Anywhere application.


The SemiCircularNumberDisplay control utilizes the same RGraph library as the Javascript Chart control. However, unlike the Javascript Chart control, the SemiCircularNumberDisplay control is a Data control, meaning it has a value that can be set and read using Alpha Anywhere’s JavaScript library.

Server-Side Charting


In addition to Javascript Charts, the UX Component also has the Chart control.  The Chart control is a server-side based control.  The Chart control is computed on the Alpha Anywhere Application Server and is used with Data Series to provide data visualizations in applications.  While not ideal for applications that need to work offline, the Chart control can be used to build dashboards in web applications.  Both Chart and Javascript Chart controls can be placed in the same component.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

mobile ,mobile apps ,mobile app development ,data visualizations

Published at DZone with permission of Sarah Mitchell, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}