- CW Rating
Live Examples
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
#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
#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
#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