Change Icon Images

Building on the Quick Start example, you can change the type of images to display in the rating using the icons option.

Note: When you use the thumbs up and thumbs down icons, you set the count option to 2 instead of the default 5, and also set the ratingMode option to single so that only the clicked icon is changed during rating, as opposed to the default continuous mode, in which all of the icons up to the clicked one are changed during rating.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the axis label rotation and the marker type and uses the seriesStyles option to change the color of the markers and the color and width of the lines.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $('#ratingthumbs').wijrating({ count: 2, ratingMode: "single", iconWidth: 16, iconHeight: 16, icons: { iconsClass: ['wijmo-wijrating-normal-thumbdown', 'wijmo-wijrating-normal-thumbup'], hoverIconsClass: ['wijmo-wijrating-hover-thumbdown', 'wijmo-wijrating-hover-thumbup'], ratedIconsClass: ['wijmo-wijrating-rated-thumbdown', 'wijmo-wijrating-rated-thumbup'] } }); $('#ratingbar').wijrating({ iconWidth: 11, iconHeight: 61, icons: { iconsClass: ['wijmo-wijrating-normal-bar-11', 'wijmo-wijrating-normal-bar-21', 'wijmo-wijrating-normal-bar-31', 'wijmo-wijrating-normal-bar-41', 'wijmo-wijrating-normal-bar-51', 'wijmo-wijrating-normal-bar-61'], hoverIconsClass: ['wijmo-wijrating-hover-bar-11', 'wijmo-wijrating-hover-bar-21', 'wijmo-wijrating-hover-bar-31', 'wijmo-wijrating-hover-bar-41', 'wijmo-wijrating-hover-bar-51', 'wijmo-wijrating-hover-bar-61'], ratedIconsClass: ['wijmo-wijrating-rated-bar-11', 'wijmo-wijrating-rated-bar-21', 'wijmo-wijrating-rated-bar-31', 'wijmo-wijrating-rated-bar-41', 'wijmo-wijrating-rated-bar-51', 'wijmo-wijrating-rated-bar-61'] } }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
     $(document).ready(function () {
         $('#ratingthumbs').wijrating({
             count: 2,
             ratingMode: "single",
             iconWidth: 16,
             iconHeight: 16,
             icons: {
                 iconsClass: ['wijmo-wijrating-normal-thumbdown', 'wijmo-wijrating-normal-thumbup'],
                 hoverIconsClass: ['wijmo-wijrating-hover-thumbdown', 'wijmo-wijrating-hover-thumbup'],
                 ratedIconsClass: ['wijmo-wijrating-rated-thumbdown', 'wijmo-wijrating-rated-thumbup'] 
                }
         });
         $('#ratingbar').wijrating({
             iconWidth: 11,
             iconHeight: 61,
             icons: { 
                 iconsClass: ['wijmo-wijrating-normal-bar-11', 'wijmo-wijrating-normal-bar-21', 'wijmo-wijrating-normal-bar-31', 'wijmo-wijrating-normal-bar-41', 'wijmo-wijrating-normal-bar-51', 'wijmo-wijrating-normal-bar-61'],
                 hoverIconsClass: ['wijmo-wijrating-hover-bar-11', 'wijmo-wijrating-hover-bar-21', 'wijmo-wijrating-hover-bar-31', 'wijmo-wijrating-hover-bar-41', 'wijmo-wijrating-hover-bar-51', 'wijmo-wijrating-hover-bar-61'],
                 ratedIconsClass: ['wijmo-wijrating-rated-bar-11', 'wijmo-wijrating-rated-bar-21', 'wijmo-wijrating-rated-bar-31', 'wijmo-wijrating-rated-bar-41', 'wijmo-wijrating-rated-bar-51', 'wijmo-wijrating-rated-bar-61'] 
                 } 
         });
     });
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the ratings.
Save your HTML file and open it in a browser. The ratings appear like the ones in the live widget below, with a thumbs up or down rating, and a bar graph rating. Click to show the rated images.

Reference

wijrating API

Widgets

Quick Start