Another example of progress bar

In the interest of sharing, Peter Allen from California has sent me his own implementation of the progress bar for task lists.

I’d be surprised that his example exactly fits your needs, but the purpose here is to show that the method can be pushed far beyond the basic examples I used in my tutorial.

Peter takes into account three fields to build the progress bar: process status (choice), progress (choice) and % complete. Here is the formula:

="<DIV style='background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",([% Complete]*100),100)&"%;'></DIV></DIV>"

The legend at the bottom is plain HTML inserted in a separate Content Editor Web Part:

<SPAN class=style7><STRONG>Legend</STRONG></SPAN><SPAN class=style6>:&nbsp; <FONT style="BACKGROUND-COLOR: #c0c0c0">[&nbsp;&nbsp;&nbsp; ]</FONT> Not Started&nbsp; <FONT style="BACKGROUND-COLOR: #ccff66">[&nbsp;&nbsp;&nbsp; ]</FONT> On Track&nbsp; <FONT style="BACKGROUND-COLOR: #ffff99">[&nbsp;&nbsp;&nbsp; ]</FONT> Early warning of potential risk&nbsp; <FONT style="BACKGROUND-COLOR: #ff5050">[&nbsp;&nbsp;&nbsp; ]</FONT> Serious risk to completion&nbsp; <FONT style="BACKGROUND-COLOR: #99ccff">[&nbsp;&nbsp;&nbsp; ]</FONT> Completed&nbsp; <FONT style="BACKGROUND-COLOR: #000000">[&nbsp;&nbsp;&nbsp;&nbsp; ]</FONT> Excluded</SPAN>

Thanks for sharing Peter!

 

Update [09/30/2008]
Below a second version that displays the % complete value on the chart. Note the use of absolute positioning, so that the value doesn’t interfere with the bar. The formula is written for both Internet Explorer and Firefox.

The formula:

="<DIV style='position:relative; background-color:Beige;'><DIV style='background-color:"&IF([Process Status]="0.Not Started","Gainsboro",IF([Process Status]="1.Started",IF(Progress="3-Red","red",IF(Progress="2-Yellow","yellow","ADFF2F")),IF([Process Status]="2.Completed","87CEEB","Black")))&"; width:"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),TEXT(1,"0%"))&";'>&nbsp;</DIV><DIV style='position:absolute;top:0px;left:0px'>"&IF([Process Status]="1.Started",TEXT([% Complete],"0%"),"")&"</DIV></DIV>"