barchart

Along with all the slick widget packages--BLT, ClassyTcl, and so on--which build in canvas-oriented barcharting, there's a dead-simple but too-little-known pure-Tcl technique, the "dilation trick" for generating barcharts for Web applications.

[Show picture of example output [L1 ] [Note that the previous link doesn't work as of Jan 26, 2005]. Show sample code. Discuss axes and legends. Explain alternatives for generation of color image. Refer to color codes.] [Cross-language comments in [L2 ].]

A different way to roughly the same visual content is by way of JavaScript. This is interesting simply for its architectural distinctiveness. [L3 ] provides examples.

With more recent graphical browsers, CSS provides a couple of ways to fabricate bars, including this example taken from Peter van Kamen:

   <div style="background-color:red  ;height:16px;width:100px;"></div>
   <div style="background-color:blue ;height:16px;width: 50px;"></div>
   <div style="background-color:green;height:16px;width: 70px;"></div>
   <br />
   <div style="position:relative;background-color:red;
        width:16px;height:100px;"></div>
   <div style="position:relative;background-color:blue;
        width:16px;height: 50px;top: -50px;left: 20px;"></div>
   <div style="position:relative;background-color:green;
        width:16px;height: 70px;top:-120px;left: 40px;"></div>

"Web special effects" has related information.

It's easy enough to whip together a simple barchart on a canvas without any extension. Here's an example:

    pack [canvas .c]
    set y_origin 100
    set x_origin 20
    set heights {11 30 15 16 77 5 14 12 8 33 9}
    foreach height $heights {
        set x_next [expr $x_origin + 5]
        .c create rectangle \
                  $x_origin $y_origin $x_next [expr $y_origin - $height]
        set x_origin $x_next
    }