Use of HTML-tables for a conclusion of diagrams

Introduction

By development of some kinds of scripts, in particular - scripts of votings, it happens it is desirable to organize in them an evident conclusion of those or other statistical data as the diagram.

Usually "graphic" conclusion of a CGI-script is organized by formation by a script of figure in one of formats webs - schedules (more often GIF or PNG) and inserts of the link to this figure <IMG src = "..."> on a deduced{removed} HTML-page.

However the spelling of a program code on formation of figures represents significant difficulties, is especial for beginning{starting} programmers since it assumes or thorough studying of rather complex  formats of graphic files, or use of libraries for job with grafikoj, written by others.

All this is complicated also that, that the algorithm of compression of data LZW, used in GIF, is now patented and not free-of-charge for use. Differently, developers of "iron" and ON which use the given algorithm, should pay patent deductions to the firm - holder of the patent. And as such order of things is completely unacceptable for developers free-of-charge ON the developed graphic libraries or at all do not support format GIF, or support only formation of the "not compressed" GIF-files.

Whether however necessarily for a conclusion of diagrams to HTML-page to use "present{true}" to the schedule? Whether there are no " alternative ways "? And in general, whether use schedules in the best and optimum way of a conclusion of diagrams is?

In this clause{article} I offer " an alternative way " conclusion stolbchatykh (linear) diagrams, based on HTML-tables. This way, in my opinion, differs comparative (and in comparison with formation schedules - significant) simplicity of realization and high quality of "result".

The theory

As is known, language HTML allows to operate practically all parameters of tables. The essence of an offered{a suggested} method consists that the HTML-table can "be generated" in such a manner that she will look as quite decent diagram.

Thus the developer by the minimal efforts can give to the diagram practically any kind - to change colors stolbcov (or even to fill with their figure), their width, distance between them, etc. It is possible even to write on stolbcakh the text. And all this is done{made} only by change of parameters and contents of cells of the deduced{removed} table, and all "technical" loading on formation on the screen of the user of the table of the necessary kind lozhitsja on "shoulders" of a browser.

The deduced{removed} diagram can be horizontal or vertical. Further we in this clause{article} shall consider{examine} horizontal diagrams as the most simple and is more evident illjustrirujuhhie idea.

As in the horizontal diagram each column of the diagram is submitted by line of the table further, to not bring in mess, a column of the table I shall name "column", and a column of the diagram - "column".:-)

The conclusion of the CGI-script forming such diagram, can be inserted into page with help SSI or IFRAME. Thus it is necessary to mean, that the diagram inserted on page through SSI, is a part of the page and, hence, save / «F«nUbªbSFJAn/¬EHJU¿UTSFJAn together with her. In one cases this advantage, in others - lack. One more lack of this method (in practice - not so essential) is that the table, as against figure, it is impossible to scale.

From the theory to practice

So, how it is necessary to make the table that she looked as the diagram?

In the elementary case as the diagram it is possible to construct the table with two cells in each line. The first cell will be actually a column of the diagram (she is seen and it is displayed by the necessary color or a background-ohm), and the second - invisible. As is known, the browser displays only those cells of the table which have contents (nonempty). Therefore to make seen the first cell "column", in it{her} it is necessary to place, at least, a symbol *nbsp;

The general width of these two cells for every line should be identical (width of the table), and the quantity{amount} of lines corresponds{meets} to quantity{amount} of columns of the diagram (number of displayed values).

And here our first "reefs" on a light way to the great purpose:-) begin. The matter is that the browser cannot " is simple so ", without shifts, to construct the table, at which in each line of value of width stolbcov different! For each deduced{removed} table the browser calculates width stolbcov (identical for every line) and heights of lines (identical to each column).

From this position there are two outputs{exits}:

?         To use for different columns of the diagram different tables, each of one line.

?         To use an opportunity of association of cells: for each cell of the HTML-table it is possible to set, on how much lines and-or on how much stolbcov she "is distributed" (parameters rowspan and colspan a tag <TD> accordingly).

In the second case it is necessary to construct the table, at which width stolbcov there correspond{meet} differences between the displayed values next on size, and the necessary width of a seen cell of "column" in each line to receive "distribution" of the first cell on the necessary quantity{amount} stolbcov.

Example: for display of the diagram with columns 100, 300 and 400 pixels to us are necessary to construct the table with width stolbcov 100, 200 and 100. The first column of the diagram "will borrow{occupy}" one column of the table, the second - two and the third - three. Accordingly, the second, invisible cell will borrow{occupy} so much stolbcov, how much remained.

Accordingly, the program code on formation of "table - diagram" should include algorithm of sorting of displayed values and calculations of the necessary width stolbcov tables.

Example of a script

And now we shall consider a practical example of a script for a "tabulared" conclusion of the diagram.

*!/usr/bin/perl

* the diagrams given for a conclusion

*¼bJAJA¿u $data - the data for a conclusion (already in pixels).

* $val - quantity{amount} deduced{removed} stolbcov (sootv to quantity{amount} of elements $data).

$data [1 =200; $color [1] = "*FF0000";

$data [2 =100; $color [2] = "*00FF00";

$data [3 =150; $color [3] = "*0000FF";

$data [4 =400; $color [4] = "*00FFFF";

$data [5 =500; $color [5] = "*FF00FF";

$data [6 =600; $color [6] = "*FFFF00";

$val=6;

*m¿ªS the code of sorting of values deduced{removed} on the diagram is located

*j process of his  job on the basis of a file @data it is created sorted

*¼bJAJA¿u @stp and khehsh %lvl with quantity{amount} stolbcov tables for everyone

*JAF«½n¿¬b diagrams

$rows=1;

$stp [0 =0;

$stp [1] = $data [1];

$lvl {$data [1]} =1;

$i=2;

while ($i <= $val) {

$p=0; $x=1;

while ($x <= $rows ** $p == 0)

{

if ($data [$i] == $stp [$x]) {$p=1; $lvl {$data [$i]} = $x; goto a1;};

if ($data [$i] <$stp [$x]) {

*jJAFbu¬b new value " in the middle " a file @stp

for ($y = $ rows+1; $y> = $x; $y = $ y-1) {$stp [$y+1] = $stp [$y];};

$stp [$x] = $data [$i];

*i«UUS¬F¿UTS¼ khehsh %lvl with the account of "shift" @stp

foreach $itm (keys %lvl) {if ($lvl {$itm}> = $x) {$lvl {$itm} = $lvl {$itm} +1;};};

$lvl {$data [$i]} = $x;

$rows = $ rows+1;

$p=1;

};

$x ++;

};

if ($p == 0) {$rows = $ rows+1; $stp [$rows] = $data [$i]; $lvl {$data [$i]} = $rows};

$i ++;

};

*Z here we, actually, deduce{remove} the table

print " Content-Type: text/htmlnn ";

print " <TABLE border=0> n <TR> ";

*jHHu«s¿¼ the first line of the table, specifying to a browser the necessary width of cells

*D¡b it will not be displayed, since cells empty

for ($k=1; $k <= $rows; $k = $ k+1) {

$w = $ stp [$k] - $stp [$k-1];

print " <TD width = $ w> </TD> ";

};

print " </TR> n ";

*jHHu«s¿¼ the lines containing the diagram

for ($v=1; $v <= $val; $v = $ v+1) {

$tl = $ lvl {$data [$v]};

$rst = $ rows-$ tl;

print "<TR>";

*aJA½¿ the seen cell is (deduced{removed} value not 0: $tl> 0),

*F« it is deduced{removed} her :

if ($tl> 0)

{print " <TD bgcolor = $ color [$v] colspan = $ tl> </TD> ";};

*aJA½¿ the invisible cell is (deduced{removed} value not equally maximal),

*F« it is deduced{removed} her :

if ($rst> 0)

{print " <TD colspan = $ rst> </TD> ";};

print " </TR> n ";

};

print " </TR> </TABLE> ";

Since the program code resulted here as the initial data uses already "ready" values in pikselakh (instead of actually deduced{removed} sizes in their initial kind), before his  use it is necessary to transform deduced{removed} sizes (we shall say, percent{interests}) in quantities{amounts} of pixels in view of desirable width of the diagram.

We admit{allow}, we should deduce{remove} results of voting which are passed in variables $za, $prot, $vozd in values of percent{interests}.

$width=400; *eS½bS¼bn width of the diagram

$data [1] = ($za/100) * $width;

$data [2] = ($prot/100) * $width;

$data [3] = ($vozd/100) * $width;

$val=3;

Management of thickness stolbcov

In some cases you can be necessary is obvious to set thickness of columns of the diagram, i.e. height of lines of the table. Here again to you there will be one more "reef" of the given decision. The matter is that parameters width and height a tag <TD> set not unequivocal, but the minimal values of width and heights of a cell of the table. I.e. if " on contents " the cell is less, than is specified in parameters width and height she "is stretched{dragged out}" till the necessary sizes.

Our example at all does not set in tags <TD> parameter height, therefore the height of cells of the table is defined{determined} by the sizes of a font to which the symbol *nbsp "is written"; in a seen cell (in spite of the fact that it is a symbol of a blank, he, as well as any other symbol, has the height) both a space between "paragraph" and borders of a cell. Accordingly, if not to accept additional measures on different pages and at different visitors to look a little differently.

" General view of the decision " this problem  is minimization of own height of a cell and the task of its{her} height with the help of parameter height a tag <TD>.

The most "radical" way of reduction of height is the premise{room} in a seen cell instead of and not text contents, say, a picture in the size 1x1 a pixel:

<IMG width=1 height=1 src = "trans.gif">

And in trans.gif to place the transparent image in 1 pixel.

Then "own" height of cells will turn out is very small (some pixels) and parameter height and you can unequivocally set height of cells of the table - diagram, and consequently, and thickness of columns.

One more way to reduce "own" height of cells - maximum to reduce the size of a font in a "seen" cell.