Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Displaying information with Google gauges

Gauges are a powerful way to display velocity, status, or simple measurements. This recipe demonstrates how to use the Google gauge chart control to display progress towards meeting monthly sales targets. The following screenshots show this completed recipe running on both iOS and Android:

Tip

When running this recipe on Android, please note Android 4.0 or higher is required.

Getting ready

This recipe uses Google Charts to display the gauge. When adding this recipe to your app, you will need to design for a network dependency as Google Charts requires a connection to render chart information. These components can be downloaded from the source code provided by the book, or individually through the links provided in the See also section at the end of this recipe. The first step in setting up this recipe is to copy the web folder highlighted in the following screenshot into the Resources folder of your project folder. After copying the web folder, you will need to copy the persist.js file into the Resources folder of your Titanium project as shown in the following screenshot:

How to do it…

After adding the web folder and persist.js CommonJS module as discussed in he previous section, you will need to create your application namespaces and use require to import the module into your code, as the following snippet demonstrates:

//Create our application namespace
var my = {
  persist : require('persist'),
  session:{},
  isAndroid : Ti.Platform.osname === 'android'
};

Loading saved sales information

After our namespace has been created, the first step is to load our saved sales information. If no prior sales data has been saved, a default of 10 is provided.

my.session.sales = my.persist.load();

Creating a UI for the recipe

Now we create the UI to display our sales data.

First, a Ti.UI.Window window is created to host all of our UI elements:

var win = Ti.UI.createWindow({
    backgroundColor: '#fff', title: 'Sales Gauge', barColor:'#000', layout:'vertical',fullscreen:false
});

Next, a Ti.UI.WebView is created to display the Google gauge. This Ti.UI.WebView is used to display a local html page that hosts the Google Chart control. The following snippet demonstrates how to load a local html page (index.html) from the project's web folder:
```
var webView = Ti.UI.createWebView({
  top:10, height:200, width:200, url:'web/index.html'
});
win.add(webView)
```

Finally, a Ti.UI.Slider is added to the recipe's Ti.UI.Window. The user can use this slider to adjust their monthly sales.

var slider = Ti.UI.createSlider({
    min:0, max:100, value:my.session.sales, left:10, right:10, height:'30dp', top:10
});
win.add(slider);

Adjusting sales

As the user adjusts the Ti.UI.Slider, the following methods are used to update the Google gauge with the new sales numbers. The updateSales method updates the contents of Ti.UI.WebView with the new sales number:

function updateSales(sales){

The passed-in sales value is placed into the session's my.session.sales property for later use:

  my.session.sales = sales;

The evalJS method is called on Ti.UI.WebView to provide the new sales information to the updateGauge method contained within the example index.html file. This method is used to update the Google gauge. For more details, please see the contents of this recipe's index.html file.

  webView.evalJS('updateGauge(' + my.session.sales + ')'),

After updating Ti.UI.WebView, the new sales value is saved into Ti.App.Properties for later use:

  my.persist.save(my.session.sales);
};

The change event on the recipe's Ti.UI.Slider method adjusts the Google gauge as the user moves the slider:

  slider.addEventListener('change',function(e){

Each time the change event is fired, the new Ti.UI.Slider value is provided to the updateSales method, to be reflected by the Google gauge hosted in the recipe's Ti.Ui.WebView.

  updateSales(Math.round(e.value));
});

Reloading saved sales

Each time Ti.Ui.Window is loaded, the following code is use to display the saved sales values and initialize the Google gauge. The next snippet demonstrates how the recipe reloads the sales information on opening Ti.UI.Window:

win.addEventListener('open',function(e){

First, a network connection is performed. Since the recipe uses Google Charts, a network connection is required to display this information:

  if(!Ti.Network.online){
    alert('Network connection required.'),
    return;
  }

Finally, a load event listener is added to Ti.UI.WebView. Once loaded, the updateSales function is called to initialize any previously saved sales information:

  webView.addEventListener('load',function(x){
    assist.updateSales(my.session.sales); 
  });

Table of Contents for Displaying information with Google gauges

Create new playlist

Sign In

Sign Up