Title:       SVG Based Star Rating Control
Author:      SIDDHARTH JAIN (fd97207)
Email:       siddjain@live.com
Platform:    
Technology:  Javascript
Level:       Beginner/Intermediate
Description: A Star Rating Control that uses SVG instead of image sprites
Section      Custom Controls
SubSection   General
License:     GPL3

Introduction

Star Rating Controls are very common and ubiquitous in today's websites. They can be found on websites like amazon.com, netflix.com, and even codeproject.com. These controls allow users to rate an item on amazon, a movie on netflix, or in case of codeproject - an article, such as the one you are currently reading. Have you wondered how they work? Most of them are based on image sprites some css magic. Do a search in your favorite search engine to see what I mean. I think its time now to move onto controls that use SVG instead of image sprites. Most commonly used browsers today have full support for SVG. If your browser doesn't - why are you still using it? What are the advantages of a SVG based control? A SVG based control can be highly configurable as I will show you in this article. Do you want 5 stars or 10 stars? Do you want the stars to be colored yellow or red? The SVG control I am going to describe here allows you to easily configure these settings and customize the control to your requirements.

Background

I expect the reader to have some familiarity with javascript, HTML, and possibly SVG. I only cater to Chrome, but expect examples to work in other decent browsers as well.

Using the Code

Lets jump right in. Download star_rating_demo.zip and unzip it - you should see 4 files in the unzipped folder: star_rating.js, demo.html, demo2.html, demo3.html.

All the code for the control is in one file star_rating.js. I am going to illustrate how you can use the control via 3 examples.

Example #1 demo.html  

The entire code for this example is in the file demo.html and is copied below: 

<!doctype html>
<html>
<head>
</head>
<body>
	<div id="my_widget"
		class="rating_widget" 
		number_of_stars="5"
		initial_value="0"
		default_color="#ccc"
		initial_value_color="#ff0"
		final_value_color="#f00"
		captions="Poor, Didn't like it, OK, Good, Excellent!"
		onclick="clickHandler"
	></div>
<script src="star_rating.js">	
</script>
<script>
	function clickHandler(sender, args)
	{
		alert('your rating: ' + args);
	}	
</script>
</body>
</html>
      

See for yourself what this code does. Tip for IE (version 9 or later) users: if you are not seeing the control below, press F12, and set Document Mode to IE9 standards.

 

We can see 5 stars colored grey (look for default_color="#ccc" in code above). If you mouse over the stars, they will change color to red (look for final_value_color="#f00" in code above), and you will also see corresponding text displayed (Poor, Didn't like it, OK, Good, Excellent!). If you click, the control will freeze, and the clickHandler function will get called. The rating is passed to the function as the args parameter. Look for the class="rating_widget" applied on the div - this is what causes the control to appear inside the div. 

Example #2 demo2.html:

In this example we want to start out with a control that has 10 stars and has an initial rating of 7. Also I am going to illustrate another method of creating the control (this time in javascript, as opposed to markup in Example #1)

<!doctype html> 
<html> 
<head>
</head>
<body>	
<script src="star_rating.js">	
</script>
<script>
	var widget = new rating_widget(
	{
		number_of_stars: 10, // the total number of stars in the control
		initial_value: 7,    // initial rating
		default_color: 'rgb(200,200,200)',     // the grey stars 
		initial_value_color: 'rgb(255,255,0)', // the yellow stars
		final_value_color: 'rgb(255,0,0)',     // the red stars
		captions: '1,2,3,4,5,6,7,8,9,10',      // text to display to provide feedback to user				
		parentNode: document.body,   // parent node of the control
		onclick: function(sender, args)  // function to execute on mouse click
					alert('your rating: ' + args);
		}
	});			
</script>
</body>
</html>  

Result: 

By changing the input parameters' values to the constructor of rating_widget, you can configure the control to your requirements - easily change colors, number of stars, and caption.

Example #3 demo 3.html:

In this final example, we will display a static control - one that does not allow the user to change the rating:

<!doctype html>
<html>
<head>
</head>
<body>
	<div id="my_widget"
		class="rating_widget" 
		number_of_stars="5"
		initial_value="3.5"
		default_color="#ccc"
		initial_value_color="#ff0"
		final_value_color="#f00"		
		disabled="true"
	></div>
<script src="star_rating.js">	
</script>
</body>
</html> 

Result: 

Setting disabled="true" disables user from changing the rating of the control.

Conclusion

In this article I described a star rating control that uses SVG instead of image sprites and CSS. The control is highly configurable and number of stars, their color, and caption text can be easily changed. The control can be embedded in html markup (Examples #1, and #3), or can be dynamically instantiated in javascript (Example #2). I hope it is useful to some.

History

4/19/2012 - initial post