• CW Rating

Live Examples

PluginJoomla 3

Let's find out what can be achieved with CW Ratings & Graphs plugin...

#Example 1: Basic Syntax

{CWRATING}max=200;label=Average;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- Circle rating
- Display Overall value as Average value of all values
- radius 40px
- color set to blue gradient
- numbers rounded to 0 decimals
- delay for loading each row is 500ms

Quadrant Benchmark

Average
Apple iPhone 6s (iOS9)
Apple iPhone 6 (iOS9)
Google Nexus 9
Apple iPhone 5s (iOS8)
Xiaomi Mi Note Pro
Google Nexus 6
Samsung Galaxy S6

#Example 2: Circle Rating with % values

{CWRATING}unit=%;overall=off;color=#FF9B00;decimal=1;r=40;max=200;delay=500;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- Circle rating
- unit in percent - values will be presented in %
- radius 40px
- color set
- numbers rounded to 1 decimals
- max value of graph is 200
- delay for loading each row is 500ms

Quadrant Benchmark

Apple iPhone 6s (iOS9)
Apple iPhone 6 (iOS9)
Google Nexus 9
Apple iPhone 5s (iOS8)
Xiaomi Mi Note Pro
Google Nexus 6
Samsung Galaxy S6

#Example 3: Circle Rating with Overall

{CWRATING}label=Maximum;overall=200;color=#4ABF0B;decimal=0;r=25;max=200;delay=500;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- Circle rating
- Overall value is set to 200
- Label for Overall value is set to "Maximum"
- radius 25px
- color set
- numbers rounded to 0 decimals
- max value of graph is 200
- delay for loading each row is 500ms

Quadrant Benchmark

Maximum
Apple iPhone 6s (iOS9)
Apple iPhone 6 (iOS9)
Google Nexus 9
Apple iPhone 5s (iOS8)
Xiaomi Mi Note Pro
Google Nexus 6
Samsung Galaxy S6

#Example 4: Bar rating with side labels

{CWRATING}layout=bar;height=10;color=#C442ED;decimal=0;max=200;delay=500;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- BAR rating
- height of row 10px
- single colored rows (if color2 is not used to make color gradient)
- numbers rounded to 0 decimals
- max value of graph is 200
- delay for loading each row is 500ms

as labelposition and labelanimation are not set - labels will be on side and animated from side

Quadrant Benchmark

#Example 5: Bar rating with bottom labels

{CWRATING}layout=bar;labelposition=bottom;height=20;overall=off;decimal=0;max=200;delay=0;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- BAR rating
- height of row 20px
- no color parameter set = default color gradient
- numbers rounded to 0 decimals
- max value of graph is 200
- delay for loading each row is 0ms
- label position is under the bars

as labelanimation are not set - labels will be animated from side

Quadrant Benchmark

#Example 6: Bar rating with bottom labels and thin bars

{CWRATING}layout=bar;labelposition=bottom;height=20;overall=off;decimal=0;max=200;delay=300;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

This is actually same as #Example 2 with changes:
- height to 5px
- color to black
- delay to 300ms

Quadrant Benchmark

#Example 7: Bar rating with side labels with from-top animation

{CWRATING}layout=bar;labelposition=bottom;height=20;overall=off;decimal=0;max=200;delay=0;Apple iPhone 6s (iOS9)=196;Apple iPhone 6 (iOS9)=131;Google Nexus 9=108;Apple iPhone 5s (iOS8)=98;Xiaomi Mi Note Pro=94;Google Nexus 6=80;Samsung Galaxy S6=75{/CWRATING}

this syntax will display Rating with
- BAR rating
- height of row 20px
- color set to "red", not hex value so no transparency for value boxes
- numbers rounded to 0 decimals
- max value of graph is 200
- delay for loading each row is 0ms
- label position is next to the bars
- labelanimation is set to top

Quadrant Benchmark

 

Impressed? Want to try it?     DOWNLOAD

Want to see more about settings and documentation?     INSTALLATION AND GUIDE

JED Rating

Overall
Functionality
Ease of use
Documentation
Support
This rating graph is done by CW Ratings & Graphs plugin

Related articles