|Description / User's Manual||Examples||Revision History||Copyright Notice, Conditions & Disclaimer|
Good-looking bar graphs in WEB-pages made easy and flexible!Notice: The bargraph shown above is NOT a bit-mapped image file! It's a HTML table structure generated by the JS Graphing Utility based upon data included in this document as hidden text!
It has puzzled me and annoyed me for a long time why it should be such a big problem to include graphs onto WEB pages. Especially if you want to visualize all sorts of data which changes over time.
As one approach you have to generate your graphs manually with a spreadsheet program, or in a Unix environment with Gnuplot or the like. Then you must somehow produce a GIF or other bit-mapped image file, which then again can be included on a WEB page. This easily becomes such a big task, that it end up being difficult to keep graphs updated even once per day, if that is desirable. Therefore I have been looking for something which made it possible to produce graphs in general for WEB-pages, which are somehow updated automatically.
OK, I happily admit this: The latest version of Gnuplot offers the possibility of generating graph output directly in GIF format, which makes publishing on a WEB page much easier. But still Gnuplot lacks the possibility of producing filled out bars.
I have also seen a simple implementation in Java, but when I tried to put it into use, it looked as if the graphs should not be too sophisticated before it took a loooong time to produce the display. Well - I thought that it maybe were because I were (still am) a novice when it comes to Java - but why on earth should it be necessary to be a multi-lingual programming and/or application expert to include even fairly simple bar graphics on a WEB-page?
I'm sure there must be several commercial software products which can be used. But again, this involves: a) Finding the right product to the right price, which can do what I want it to do. b) Installing it, and learning how to use it.
The commercial solutions I found while checking, were software for special tasks like watching network traffic and things like that, and didn't seem to offer you the possibility of supplying your own data for whatever you wanted to show.
To make a long story short, one line of code lead to the next - and they eventually ended up being the JS Graphing Utility, which is presented here.
This is done by using a HTML FORM and entering the data as VALUES of INPUT elements in the form. By using
the source data for the graph(s) becomes invisible in the reader's browser. If the HTML FORM contains only hidden input elements the form does not occupy space on the the page when it is displayed in the browser. (Further below you'll be able to find a link to a detailed descripttion of how use this utility.
The following examples are most of the graphs I use, when checking new versions of the JS Graphing Utility. You might be able to learn some usefull tricks here (or get utterly confused??;-).
Uptime Example #1: Stacked bars and enlarged plotarea
Uptime Example #2: Bars side-by-side and default size of plotarea
Uptime Example #3: Default layout
Disk Usage BarGraph Example: Skipping X-tick labels
Active Example #1 & #2: With skip factor, with (#1) and without (#2) X-margin, and number of values which doesn't match modulus of (skip factor + 1)
Main Example Rotated: Vertical X-axis
Time Spend Example: Vertical X-axis ~ Horizontal bars. Large table
Uptime Example #1R: Vertical X-axis, Stacked bars and enlarged plotarea
Uptime Example #2R: Vertical X-axis, Bars side-by-side, No "X-margin"
Uptime Example #3R: Vertical X-axis, otherwise default layout
Disk Usage BarGraph Example, Vertical X-axis: Skipping X-tick labels
Time Spend Example #2: Vertical X-axis ~ Horizontal bars. Huge table of data (89 X-values, each with 2 to 8 dataseries
Data Distribution Example: Same data table as the previous "Time Spend Example #2", but the 4 other dataseries are shown
Active Example #1R & #2R: Vertical X-axis with skip factor, with (#1) and without (#2) X-margin, and number of values which doesn't match modulus of (skip factor + 1)
|ß1.32||2000-10-21|| "ALT=" text on graphic lines for debugging
and minor bug-fixes.
Using clGrWr v.1.27 and clGrSets v.1.3
|ß1.31||2000-02-05||New object properties introduced in order to
save simple text used in "ALT=" text for bars:
Data values for X and Y included as "ALT=" text with gif image for bars.
Using clGrWr v.1.26 and clGrSets v.1.3
|ß1.30||2000-02-04|| Also using 1x1_tr.gif instead
of , when the data (Y-axis) value is zero. With very thin bars on high resolution displays, the table cells for zero data values became wider than the table cells for non-zero data values because a BLANK character took up
more space than one pixel even with FONT SIZE of "1pt".
Using clGrWr v.1.25 and clGrSets v.1.3
|ß1.29||2000-01-31|| Bug fix: Using X-skip factor, vertical X-axis, no X-margin, and a single dataseries didn't work.
Using clGrWr v.1.24 and clGrSets v.1.3
|ß1.28||2000-01-30|| Bug fix: Using X-skip factor and vertical X-axis didn't work, if the number of X -values wasn't a whole multiple of (X-skip factor + 1).
Improvement: Decrease the smallest shown Y-tick value, so that the smallest Y data value always produces a bar.
Using clGrWr v.1.23 and clGrSets v.1.3
If all (y-)values to be shown are zero, then the Y-axis by default will show 0 as minimum value and 1 as maximum value.
Using clGrWr v.1.22 and clGrSets v.1.3
|ß1.26||1999-06-20|| Bugfixes and improvements required when Implemented "LegendColumns" and "LegendRows" specifications, in order to facilitate control with the geometry of the table used for the display of the legends.
PREVIOUSLY USED "Legend..." NAMEs OF SPECIFICATIONS CONCERNING THE LEGEND TEXTS, MUST BE RENAMED TO "LegendTitles...".
Using clGrWr v.1.21
|ß1.24||1999-06-16|| Bugfixes and improvements required when omitting dataseries and when values are
missing for some X-values.
FIRST DATASERIES IS NOW SHOWN AT THE BOTTOM OF STACKED BARS - previously the first dataseries was shown at the top.
Minimum value to be shown on the Y-axis is now correctly calculated for stacked bars - and when one or more dataseries is not shown.
Only dataseries shown are now consideret when auto-scaling Y-axis.
Uses clGrWr 1.19.
clGrWr 1.17: Improvements and bugfixes for graphs with vertical axis.
Instead of showing legends in a table with a single row (which tended to pull out the horizontal dimension of the plot area), legends are now shown in table with one column.
|ß1.22||1999-05-31|| Removed 'delete(chart);' - caused
Commented out 'Please wait for Netscape to show the page ...' message since operation with Netscape is not that slow anymore.
|ß1.21||1999-05-29|| Merged tables inside tables for Legend, Axis Titles, and
Plot area into the main Chart table.
This improved Netscape performance on most platforms dramatically.
|ß1.20||1999-05-24||Implementation of vertical X-axis.|
|ß1.19||1999-05-07||Bugfix: warning was undefined after succesfull browser check.|
|ß1.18||1999-05-07||Updated the initial browser check, since this utility doesn't work with Netscape 3.04!|
|ß1.17||1999-05-03||Removed handling of layer for "Wait" message. It caused document not to be redisplayed when the window was resized (and a onResize="history.go(0)" made printing from Netscape impossible!).|
|ß1.16||1999-05-02||Changes to make XaxisSkip work.|
|ß1.15||1999-05-01||Also works with Netscape 4.03 on Windows NT.|
|ß1.14||1999-04-28|| Removed assignment from within "while (...)"
and changed "return;" into "return null".
Netscape prior to 4.5 didn't like the "while (...)" construction, nor "return;" when a function sometimes return a value.
|ß1.13||1999-04-24|| Added a 'Wait' message in the window.status
field when the writing of a graph is finished and set a timer to clear
window.status 500 msecs later.
Added code to hide document.layer['wait'] if it exist 500 msecs after the writing of a graph is finished. (The document.layer['wait'] should contain a message about the document being loaded and be included in the top of the document.) This has been done because Netscape seems often to fail showing the messages written to the window.status field.
|ß1.12||1999-04-23||Bugfix in message-build for old Netscape browsers.|
|ß1.11||1999-04-21||Two digits in revision level minor. Unused code for displaying progress in separate window.|
|ß1.10||1999-04-13||Using 1x1_tr.gif to get thin lines, instead of . The later didn't work well with NT & Unix browsers (Netscape at least).|
|ß1.9||1999-04-11||First version on the net.|
Copyright (c) 1999, 2000 Axel Christian Lange. All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|Latest update, this page: February 7. 2000|