Progress Bar

Progress bars don't need to be static either. They certainly cannot replace the Chart utility but you can do some decent graphics with them, even animated ones.

Here we draw a set of several Progress Bars moving from bottom to top, with the background image for the bar set to an image of the bar fully extended, which will be uncovered depending on the value of the bar. We are using the Bezier utility to make neighboring bars move in a more coordinated way than just assigning them random values. We calculate 4 random control points for the bars, no matter how many bars there are. The Bezier function will interpolate intermediate values for the bars. On completion of one animation, we set new control points at random, calculate the new values and get them moving again.

var pbvu = [],i,NUM_BARS= 8; for (i = 0; i < NUM_BARS;i++) { pbvu[i] = new YAHOO.widget.ProgressBar({direction:'btt',width:20,height:80,anim:true,duration:0.3}).render('vumeter'); } var redrawVUs = function() { var points = [],i; for (i=0;i<4;i++) { points[i] = [i,Math.random() * 100]; } for (i = 0;i < NUM_BARS;i++) { pbvu[i].set('value',YAHOO.util.Bezier.getPosition(points,i/(NUM_BARS-1))[1]); } }; pbvu[NUM_BARS -1].on('complete',redrawVUs); redrawVUs();

---