YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: ProgressBar Control: Ratings

# ProgressBar Control: Ratings

The ProgressBar can be used within other widgets. Here we are using Yahoo! Query Language, YQL, to find sushi restaurants in San Francisco, CA and display the information in a DataTable. We are showing most of the fields as plain text, but the restaurant ratings are displayed using the ProgressBar.

View example in new window.

The Rating.AverageRating values from the YQL response are displayed as YUI ProgressBars. The YQL query for this example is:

select Title,Address,Phone, Rating.AverageRating from local.search where query="sushi" and location="san francisco, ca"

which can be tested by pasting it into the YQL Console. We are using YQLDataSource, a subclass of DataSource to handle the communication with YQL for us.

The code to build the DataTable on that query is:

var dt = new YAHOO.widget.DataTable( 'Container', [ {key:"Title", sortable:true}, {key:"Address", sortable:true}, {key:"Phone", sortable:true}, {key:"Rating.AverageRating", label:"Rating", formatter:ratingFormatter, sortable:true} ], new YAHOO.util.YQLDataSource(null, {responseSchema:{fields:[{key:"Rating.AverageRating",parser:"number"}]}}), { initialRequest:'select Title, Address, Phone, Rating.AverageRating from local.search where query="sushi" and location="san francisco, ca"' } );

We create a simple DataTable with the columns Title, Address and Phone as simple text fields that are displayed just as they are received. A fourth column receives data held in the nested field Rating.AverageRating. We use a custom formatter to render ProgressBars instead of showing the plain numbers. All columns are sortable, even the Ratings column.

The `ratingFormatter` is the function that will create the ProgressBars:

var pbs = []; var ratingFormatter = function (elLiner, oRecord, oColumn, oData) { var pb = new YAHOO.widget.ProgressBar({ width:'90px', height:'18px', maxValue:5, className:'ratings', value:oData }).render(elLiner); pbs.push(pb); };

The core of it is the creation of the ProgressBar 90px wide and 18px high. We set this size because our star image is a 18-pixel square and we want to fit up to five stars horizontally. Five is, indeed, the `maxValue` that the rating might reach. We add a className `"ratings"` to the widget, which will help us with some formatting details and, finally, we set the current value for the progressBar to the cell value.

Every time the DataTable is sorted or redrawn for any reason (such as call to the `render` method or paging), the formatter function will be called again. As with any widget, the ProgressBar might take resources that might not be automatically cleared by the garbage collector, so it is vital to call `destroy` method to make sure all such resources are cleared. We store each ProgressBar instance in the array `pbs`. Before any render, we iterate over this array and destroy every instance we have stored.

dt.on('beforeRenderEvent',function() { for (var i = 0; i<pbs.length; i++) { pbs[i].destroy(); } pbs = []; });

We have applied the `yui-skin-sam` as a skin for all the widgets of the page, (the DataTable and ProgressBars), so we need to override some of these settings in order to set the stars images. The stars come from a two images (a red star and a gray star) which are tiled to fill the allotted space. We gave the `ratings` className to all the ProgressBars as an argument at instantiation, so we can use `.yui-skin-sam .ratings` as a selector in our custom styles:

.yui-skin-sam .ratings { background: transparent url(star-bg.png) repeat-x 0 0; border:0; } .yui-skin-sam .ratings .yui-pb-mask { border:0; } .yui-skin-sam .ratings .yui-pb-bar { background: transparent url(star.png) repeat-x 0 0; }

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### ProgressBar Control Examples:

- Basic Features
- Events
- Ratings
- VU Meters

### More ProgressBar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings