Make a gif (or png) of the thermometer with the gradiations you need but make the contents of the thermometer transparent.

In the html, define a 2-row x 1-column table, sized so that the image and the table are the same size.

Use css to overlay the image on top of the table and to vary the % of the total table size that the top row (background-color: white) and the bottom row (background-color: red) occupy.

To get fancy, use 4 rows. Have the zero point in the middle. When costs are greater than donations, show red below the zero line (row3). When the donations are exceeding costs, show green above the line (row2).

The main advantage is that you only need a single image that doesn't need to be generated on the fly. You only need to vary 2 or 4 numeric values in the css generated to control the proportions of the colors, which just show through the transparent part of the thermometer image.

In reply to Re: Donation Tracking "Thermometer" by Anonymous Monk
in thread Donation Tracking "Thermometer" by hacker

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.