How could you implement something like Excel 2007's databars in HTML/CSS/JS?

What I'd like to do is produce an HTML/CSS/JS version of the following. The gridlines and other aspects are not important. It's more of a question how to do the background databars.

From stackoverflow

• A javascript-based solution like this cross-browser gradient might be a good start.

  With some DHTML, you can make a bar with a given length.

• I would use either the Grid component from Ext JS library or the DataTable component Yahoo's YUI library. The cross-browser compatibility, etc. work is done for you.

• Make the bars as background images and position them to show values. eg. with a fixed column width of 100px:

  <div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
  <div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>
  

  If your columns have to be flexible size (not fixed, and not known at the time the page is produced), it's a bit trickier:

  <style type="text/css">
      .cell { position: relative; }
      .cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
      .cell .value { position: relative; z-index: 2; }
  </style>
  
  <div class="cell">
      <div class="back" style="width: 50%;">&nbsp;</div>
      <div class="value">5</div>
  </div>
  <div class="cell">
      <div class="back" style="width: 80%;">&nbsp;</div>
      <div class="value">8</div>
  </div>