Sloupcový graf pomocí JavaScriptu podruhé

V nedávno vydaném článku „Sloupcový graf pomocí JavaScriptu“ jsme si předvedli generování jednoduchého sloupcového grafu pomocí funkce DrawGraph. Tentokrát se k této funkci vrátíme a ukážeme si její rozšíření o generování sloupcového grafu z více polí a doplnění popisků osy X.

Upravená funkce DrawGraph pracuje takto:

A zde je její volání ještě jednou, tentokrát s jinými rozměry výsledného grafu (ostatní hodnoty grafu jsou stejné):

Suroviny a recept

Pomocí oblíbeného konstruktoru CreateArray…

…jsme vytvořili čtyři pole vstupních údajů. Tři z nich obsahují jednotlivé sady hodnot pro výsledný graf (červené, modré a zelené sloupce):

Čtvrté pole obsahuje popisky osy X. Všimněte si, že hodnoty jednotlivých prvků mohou v tomto poli obsahovat jak číselné, tak textové údaje, dokonce včetně HTML značek:

Největších změn doznala samotná funkce DrawGraph, mající na starost vykreslení grafu. Protože je její kód poměrně dlouhý, probereme si jej po částech. Nejprve hlavička funkce a inicializace pomocných proměnných:

Hlavička funkce zůstala stejná, i když tentokrát předpokládáme, že do funkce bude vstupovat více argumentů – minimálně 4. První dva argumenty (width a height) určují, stejně jako v minulém příkladě, výsledné rozměry grafu. Třetí argument, definovaný jako nepovinný, určuje pole s popisky osy X (v našem případě proměnná xaxis). Dalšími argumenty jsou jednotlivá pole se sadami hodnot pro graf (zde graph1 až graph3), kterých může být libovolný počet počínaje jedním. Do proměnné arrays v úvodu pole uložíme počet těchto vstupních sad hodnot, do proměnné columns uložíme počet sloupců, který zjistíme podle délky první sady hodnot.

Následuje opět pomocný výpočet maximální hodnoty do proměnné maxval, mírně upravený vzhledem k proměnlivému počtu vstupních parametrů funkce:

Nyní budeme postupně generovat třířádkovou tabulku, obsahující samotný graf. Nejprve první řádek tabulky s barevnými sloupci příslušné výšky. Každý sloupec je v samostatné buňce tabulky, přičemž každou n-tici hodnot odděluje prázdný sloupec stejné šířky. Protože využíváme více barevně odlišených sloupečků, musíme si předem připravit tolik grafických souborů, kolik do funkce předáme vstupních sad záznamů (v našem případě 3). Soubory jsou pojmenovány point1.gif až pointN.gif:

Druhý řádek tabulky obsahuje buňky s číselným vyjádřením hodnot (výšek) jednotlivých sloupců:

Třetí a poslední řádek tabulky obsahuje popisky osy X, brané z třetího parametru, předaného funkci DrawGraph. Aby bylo zajištěno správné zarovnání vystupujícího textu, je každá n-tice buněk pod k sobě náležejícími sloupci sloučena do jedné a zarovnána na střed a nahoru. Tím také končí kód funkce DrawGraph:

Nakonec zbývá jen v příslušném místě funkci DrawGraph korektně zavolat – jako třeba v našem příkladě:

A to je vše, přeji vám příjemný den.