site logo

Sloupcový graf pomocí <table>

Sloupcové grafy jsou jednoduché pro realizaci v různých typech prohlížečů. Připravíme si pomocný obrázek např. bar.png a budeme měnit jeho rozměry pomocí atributu img. Pro svislý graf ponecháme konstantní šířku (width) a budeme měnit výšku (height) dynamicky podle potřeby. Jednotlivé sloupce grafu umístíme do tabulky.

Vlevo vidíte příklad grafu z aplikace Vizuální vady. Původ HTML kódu pochází někdy z roku 1996. Uvidíte, že pomocí tabulky lze vytvořit jednoduchý a přehledný HTML kód pro zobrazení sloupcového grafu.

Pro potřeby tohoto článku byl původní HTML kód nepatrně upraven. Atributy byly částečně přesunuty z td do CSS, aby se kód zkrátil. Původní kód obsahoval i DHTML funkce pro zobrazení číselných hodnot při onmouseover, ten je v této ukázce vynechán, ale o nic nepřijdete, bude popsán později.

Vynechána je i část kreslení stupnice, kterou můžete vidět na ukázce, takže tento graf je značně zjednodušen.


<style type="text/css">
.tdg {width: 13px; height: 300px;}
.bar {width: 12px; border: 0;}
</style>

<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr valign="bottom">
<td class="tdg"><img class="bar" height="260px" src="bar.png" /></td>
<td class="tdg"><img class="bar" height="265px" src="bar.png" /></td>
...
</table>

</body>

V sekci CSS připravíme dvě třídy. Třída tdg bude sloužit pro políčka tabulky, důležitá je výška (height), která udává grafické měřítko a žádný kreslený sloupec grafu nesmí tento rozměr překročit. Třída bar je pro obrázek, kterým budeme kreslit náš graf. Šířka tohoto prvku je menší než prvku tdg a vytvoří tak mezeru mezi sloupci grafu. Při stejné šířce obou tříd by vznikla souvislá plocha grafu, což může být někdy zajímavé.

V HTML části kódu najdete jednoduchou tabulku. Důležité je správné nastavení vertikálního zarovnání definované v tr, které nastaví souřadný systém tak, že všechny kreslené sloupce grafu budou zarovnány na spodní okraj tabulky. Dále zapisujeme jednotlivé políčka tabulky do kterých umístíme náš připravený obrázek pro který serverový skript vypočítal výšku (červeně). V ukázce kódu jsou uvedeny jen dvě první políčka tabulky a cesta ke grafickému prvku img je zkrácena, tu si musíte nastavit podle vlastní situace.

Černé části kódu jsou konstantní, červené části doplňuje server podle výpočtu z aktuálních hodnot a liší se pro každý sloupec grafu. Nesmíme zapomenout testy na grafický rozsah sloupce tak, aby výška height nebyla záporná, nebo nepřesáhla výšku stanovenou v tdg (to by nám rozhodilo celý graf). Pokud vyjde výška nulová, doporučuji vynechat kreslení prvku img v políčku tabulky a nahradit jej tvrdou mezerou (&nbsp;). Nezapomeňte na správnou deklaraci DOCTYPE, která přepne browsery IE do standardního módu XHTML.

Stalo se módou sezonní odmítat <table> v jakékoli podobě. Pokud se to týká layoutu stránky, lze souhlasit. Odmítat tabulky pro zobrazení dat a grafů je hloupost. Není jednodušší cesta jak zobrazit databázové data a sloupcové grafy než pomocí <table>.

Nulová výška sloupce se vykresluje rozdílně v různých prohlížečích. Správně ji vykreslí pouze FF a nejnovější IE7, sloupec nulové výšky není viditelný. Opera a starší verze IE nakreslí sloupec výšky 1px i při požadované výšce 0.

Tuto skutečnost jsem znovuobjevil při eperimentování s tímto grafem, dynamicky vykreslovaným pomocí AJAXu. Také to vysvětluje onu doporučenou tvrdou mezeru.

updated 04.11.2006