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.

Title	Address	Phone	Rating
Loading...

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


1	select Title,Address,Phone, Rating.AverageRating from local.search
2	where query="sushi" and location="san francisco, ca"
	view plain \| print \| ?

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:


1	var dt = new YAHOO.widget.DataTable(
2	'Container',
3	[
4	{key:"Title", sortable:true},
5	{key:"Address", sortable:true},
6	{key:"Phone", sortable:true},
7	{key:"Rating.AverageRating", label:"Rating", formatter:ratingFormatter, sortable:true}
8	],
9	new YAHOO.util.YQLDataSource(null, {responseSchema:{fields:[{key:"Rating.AverageRating",parser:"number"}]}}),
10	{
11	initialRequest:'select Title, Address, Phone, Rating.AverageRating from local.search where query="sushi" and location="san francisco, ca"'
12	}
13	);
	view plain \| print \| ?

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:


1	var pbs = [];
2	var ratingFormatter = function (elLiner, oRecord, oColumn, oData) {
3	var pb = new YAHOO.widget.ProgressBar({
4	width:'90px',
5	height:'18px',
6	maxValue:5,
7	className:'ratings',
8	value:oData
9	}).render(elLiner);
10	pbs.push(pb);
11	};
	view plain \| print \| ?

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.


1	dt.on('beforeRenderEvent',function() {
2	for (var i = 0; i<pbs.length; i++) {
3	pbs[i].destroy();
4	}
5	pbs = [];
6	});
	view plain \| print \| ?

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:


1	.yui-skin-sam .ratings {
2	background: transparent url(star-bg.png) repeat-x 0 0;
3	border:0;
4	}
5	.yui-skin-sam .ratings .yui-pb-mask {
6	border:0;
7	}
8	.yui-skin-sam .ratings .yui-pb-bar {
9	background: transparent url(star.png) repeat-x 0 0;
10	}
	view plain \| print \| ?

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: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: ProgressBar Control: Ratings

Configuration for This Example

YUI Logger Output:

Logger Console

ProgressBar Control Examples:

More ProgressBar Control Resources: