how to make a bar rating system using logarithm

Question

I want to make a bar rating system for my website and this is what i have actually:

enter image description here

Which doesn't look nice at all :p. I want the height to increase like a Exponential curve gradually. Not too steep at the beginning, which gradually increase afterward.

Using:

height = (Math.ceil( Math.log(i) * 10) / 10 ) + settings.height

where i is the for loop variable from 0 -> 19(number of bars) and settings.height being the base height which is 15. What should i do to correct it?

edit: Like this but upside down enter image description here

a logarithmic increase "upside down" as you put it would just be an exponential increase — Pankrates, Mar 29 '13 at 16:29

score 1 · Accepted Answer · answered Mar 29 '13 at 16:50

1

The following is based on David Fregoli's initial comment which I expanded to get the wanted shape and correct orientation. See this fiddle (Not intended to steal his answer, so feel free to accept his)

The result

CSS

#container {
    position: relative;
    height: 150px;
}

bar {
    position: relative;
    width: 20px;
    border: 1px solid #aaf;
    background-color: #ddf;
    margin-right: 1px;
    float: left;
    cursor: pointer;
}

JS

var baseheight = 5;
for ( var i = 0; i < 10; i++ ) {
    var h = 5*Math.pow(2,i/2) + baseheight;
    var offset = Math.ceil(150-h);
    $('#container').append($('<bar>').css('height', h).css('top', offset));
}

answered Mar 29 '13 at 16:50

Pankrates

3,074
1
22
28

Thought was david Fregoli. it he don't post an anwser.i'll accept urs :) – Alan Tyloo Mar 29 '13 at 17:03
no worries I don't know what I actually did so I was refreshing my maths, you can accept this one :D – David Fregoli Mar 29 '13 at 17:04
can't it be les steep at first and more steep around 3/4 of it? – Alan Tyloo Mar 29 '13 at 17:05
:p. i could but don't know why i prefer to use an algorithmn :p – Alan Tyloo Mar 29 '13 at 17:10
the steepness can be controlled by the divisor in `Math.pow(2, i/2)` if you increase the divisor the steepness will diminish – Pankrates Mar 29 '13 at 17:11

how to make a bar rating system using logarithm

1 Answers1