Omnis JavaScript Component Series: Maps and Charts

JavaScript Series1_MapsCharts

The Omnis JavaScript Client allows you to create all types of web and mobile applications that will run on virtually any device, on any platform including iOS, Android, Windows, and OS X. As long as the device has a browser capable of running JavaScript, you will be able to run your Omnis web or mobile app on that device.

The Omnis Studio SDK itself provides a very rich environment for creating web and mobile apps using the JavaScript Client, and includes all the tools you would expect in a mature development environment including a debugger, SQL database browser, report generator, as well as a wealth of GUI design components. There are over 30 ready-made JavaScript based components that you can use in your web and mobile apps. In this series of blog articles, we will explore a few components at a time in each post. We’ll begin with the Map and Chart components.

(Note: The JavaScript Components are available in Omnis Studio 5.2 and above, which can be downloaded from the Omnis area of our website.)

Put your app on the map

Many different types of applications require that you display the location of some place or object to the end user. This can easily be achieved in your Omnis web and mobile apps using the JavaScript Map Control, which is essentially a container for displaying a Google™ map in your web form. To activate the component, you’ll need to acquire an API key from Google. But once this is done, setting the properties for the Map Control is reasonably straightforward (Note: To use Google Maps you and your end user must agree to the general “Terms of Use” for Google Maps which are provided via a link within the map itself.)

By setting various properties in the JavaScript Map Control, you can display specific locations (using a ‘latitude:longitude’ setting), change the map type (choose Street, Satellite, Hybrid, or Terrain), zoom in or out, or allow an end user to interact with the map by clicking or tapping the map area (adding a marker for example). You can set these properties in design mode using code or you can provide other controls on the web form to allow the end user to change the visual properties of the map.

The Map and Chart JavaScript components allow you to create highly interactive web and mobile apps with Omnis Studio

A slice of the pie

When you need to present numerical data in an application, it is often useful to be able to illustrate this information in a visually graphical way. Omnis Studio provides two types of JavaScript chart components: the Pie chart and Bar chart. Both these components are capable of representing data sets stored in a data list variable: this usually involves a set of data points, such as a list of names, and a numerical value for each of the members in the list, held in a two-column list. As you would expect for pie charts, each value in your list is shown as a percentage of the total of all the values in your list.

There are various properties for each component that allow you to control the visual appearance of the charts. For bar charts you can set the chart direction (vertical or horizontal), the style or shape of the bar ends, and you can display data values when the end user’s mouse hovers over the bar. For pie charts, you can change the position of the legend and allow the pie segments to “fly out” when the end user’s mouse hovers over the segment.

For further interactivity, you can detect when users click or tap on a bar or segment. This would allow you to write a method to trap these clicks and drill down further into your data set, as an example.

Try it for yourself: the Apps Gallery

A sample app for Map and Chart components can be found in the JavaScript Apps Gallery located on the Omnis site. Open the gallery page in the browser on your desktop PC or tablet and select “Map”, “Pie Chart”, or “Bar Chart” in the list. You can try these apps in the Apps Gallery, or you can download the sample app and try it in the latest version of Omnis Studio. Go to: Omnis Studio 5.2.2 90-day trial to download.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>