Eric Wolfram's Writing : How To : Make ASCII Graphs and HTML Status Bars

Eric Wolfram's Writing, Make ASCII and HTML Status Bars

Make ASCII Graphs and HTML Status Bars

Sometimes web site designers go to great lengths to make little status bars out of images. I like these low tech solutions. I think I first saw these elsewhere, but I wrote them myself. Feel free to use them on your pages.

ASCII slider:

       60% Completed
[==============||=========]
               60%

Status Bar in 100% HTML

30% Complete

Observe how slick the HTML code is for that...by using the width attribute for the table tag expressed as a percentage of the table, you only have to change that number to change the value of the status bar --

<!-- BEGIN status bar - sets slider width to 160 pixels -->
<table width=160 border=0 cellpadding=0 cellspacing=0>
 <tr>
  <td>
<!-- this table is for the verbal display of info -->
  <table width="100%" border=0 cellpadding=0 cellspacing=0>
   <tr>
    <td align="center"><small>30% Complete</small>
    </td>
   </tr>
   <tr>
    <td align="center">
<!-- this table is for the visual display of info, set black box width here -->
    <table width="120" border=0 cellpadding=0 cellspacing=2 bgcolor="black">
     <tr>
      <td bgcolor="gray" align="left">
<!-- this table is for the blue box, image is for Netscape and opera bug  -->
      <table width="30%" border=0 cellpadding=0 cellspacing=0 bgcolor="blue">
       <tr>
        <td><img src="/images/dot_clear.gif" width=1 height=13 alt="" border=0>
        </td>
       </tr>
      </table>
<!-- close blue box table -->
     </td>
    </tr>
   </table>
<!-- close blue box table -->
   </td>
  </tr>
 </table>
</td>
</tr>
</table>
<!-- END status bar -->

ASCII Graph

I tend to spend too much time making things like these. I put them here so I know where to find them.

 $1000                                               *
  |                                                  *
  |                                                 *
  |                                                *
  |                                               *
  |                                              *
  |                                             *
  |                                          **
  |                                      ****
  |                                   ***
  |                               ****
  |                          !*****
  |             *************
  | *************
 $50
$Old equipment----------------------------> $bleeding edge
(! = where I like to buy my technology equipment)

Here's another one.

60%
***
* *
* *           52%
* *    50%    ***
* *    ***    * *
* *    * *    * *
* *    * *    * *
* *    * *    * *
* *    * *    * *

Here's a table in ascii

 +----------+----------+----------+----------+----------+
 |   2001   |   2002   |   2003   |   2004   |   2005   |
 +----------+----------+----------+----------+----------+
 |  Margit  |   John   |   Mary   |  Eliza   |  Steven  |
 +----------+----------+----------+----------+----------+
 |   Red    |  Green   |   Blue   |  Purple  |  Black   |
 +----------+----------+----------+----------+----------+

Here's some Mac software for converting tables to ascii

HTML examples of Histograms and graphs

Graphs of birds

About This Page
Please let me know if you see any other cool ascii graphs or sliders and I'll publish them here for you. Please let me know if anything on this page is misleading or if it needs updating or additions.
eric@wolfram.org
Please feel free to link to this page so that others can find it. It's easy to link to this page, just copy the text below onto your web page:
<a href="http://wolfram.org/writing/howto/ascii_slider.html">Make ASCII and HTML status bars</a>