Sloupcový graf pomocí JavaScriptu

Pro zobrazování grafů na HTML stránkách jistě existují nejrůznější ActiveX komponenty, Java applety a podobné vymoženosti. Pokud už jste se však někdy setkali s roztomilým hlášením typu „Rozhodli jste se stáhnout a nainstalovat atd.“, možná hledáte sami cesty, jak vaše návštěvníky podobných radostí ušetřit. Zde je jedna z nich – jednoduchý JavaScriptový generátor sloupcového grafu.

Zatímco generování například 3D koláčového grafu by v JavaScriptu bylo docela obtížné, sloupcový graf svojí jednoduchostí k vytvoření přímo vybízí. Jediný zádrhel – zvolíme-li toto řešení – spočívá v tom, že návštěvníci s vypnutým JavaScriptem graf neuvidí, pokud nezvolíme alternativní zobrazení s tagem NOSCRIPT a obrázkem. Na druhou stranu se domnívám (aniž bych ovšem měl oporu v konkrétní statistice), že návštěvníků se zapnutým JavaSciptem bude řádově více než těch, kteří mají správně nainstalovány všechny potřebné ActiveX komponenty.

Zde je sloupcový graf, generovaný pomocí JavaScriptu:

A zde tentýž graf, generovaný stejným skriptem, pouze v jiné velikosti:

Samotný skript se sestává ze tří částí. První z nich je jednoduchý konstruktor pole CreateArray:

Za pomoci tohoto konstruktoru vytvoříme pole graph1, které bude obsahovat číselné hodnoty – velikosti jednotlivých sloupců grafu. Co se týká obsahu pole, může obsahovat různý počet sloupců, hodnoty mohou být libovolné kladné – pozor musíme dávat jen na přetečení. Skript nezobrazí záporné hodnoty, rovněž (pro stručnost kódu) není ošetřen proti zadání nulové hodnoty do všech sloupců – to způsobí chybu dělení nulou (jednotlivé sloupce obsahovat nulu ale mohou). Zde je tedy generování pole graph1, použitého v příkladu:

Třetí a poslední částí kódu je funkce DrawGraph(width, height), která způsobí samotné vykreslení grafu. Parametry width a height určují velikost výsledného grafu – jejich použití je vidět výše na této stránce, kde je funkce DrawGraph volána dvakrát s různými hodnotami těchto parametrů. Všechny tři části kódu lze uvést v hlavičce stránky, popřípadě v .js souboru, přičemž lze s výhodou využít generování hodnot pomocí serverových skriptů, např. ASP.

Vidíme, že funkce DrawGraph je v podstatě jen množství document.write, jejichž pomocí je generována dvouřádková tabulka, obsahující graf. Každý sloupec grafu je reprezentován jedním sloupcem tabulky, červené sloupečky, tedy grafické znázornění hodnot, jsou vytvořeny pomocí obrázku, roztaženého vždy na potřebnou velikost. První smyčka funkce má za úkol zjistit maximální hodnotu pole graph1 – tu potřebujeme ke správnému určení velikosti výsledného grafu. Ke správné funkci příkladu je potřeba grafický soubor s obrázkem sloupečku, zde point.gif, jehož velikost není pevně dána a který může obsahovat i grafický efekt přechodu nebo stínu – viz. příklady na této stránce.

Nakonec zbývá jen funkci DrawGraph v příslušném místě zavolat – a to s parametry, udávajícími požadovanou výslednou velikost grafu v pixelech. V příkladech na této stránce byla použita následující dvě volání:

A to je k JavaScriptovému grafu pro tentokrát vše. Uvedený příklad skýtá mnoho možností k experimentování a vylepšování, přeji vám tedy hodně štěstí.