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…

function CreateArray(){
    this.length = CreateArray.arguments.length
    for (var i = 0; i < this.length; i++)
    this[i + 1] = CreateArray.arguments[i]
}

…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):

var graph1 = new CreateArray( 20, 100, 50, 10, 75, 75, 80 );
var graph2 = new CreateArray( 50, 80, 60, 80, 15, 10, 70 );
var graph3 = new CreateArray( 43, 25, 23, 43, 56, 60, 110 );

Č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:

var xaxis = new CreateArray( 1995, 1996, 1997, 1998, 1999,
            ‚<font color="#FF0000">2000</font>‘, "2001<br>(výhled)" );

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:

function DrawGraph( width, height ){
    var arrays = DrawGraph.arguments.length-3
    var columns = DrawGraph.arguments[3].length

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 graph1graph3), 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:

    // spoceteme maximalni vysku
    var maxval=0;
    for( var j=3; j<DrawGraph.arguments.length; j++ ) {
        for( var i=0; i<columns; i++ ) {
            if ( DrawGraph.arguments[j][i+1] > maxval )
                maxval = DrawGraph.arguments[j][i+1]
        }   
    }

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.gifpointN.gif:

    document.write (‚<table border="0" cellpadding="0" cellspacing="0"><tr>‘ )
    // barevne sloupce   
    for( i=0; i<columns; i++ ) {
        for( j=3; j<DrawGraph.arguments.length; j++ ) {
        document.write( ‚<td width="‘ + width/(columns*(arrays+1)) +
                ‚px" valign="bottom" align="center">‘ +
                ‚<img src="point‘ + (j-2) + ‚.gif" width="‘ +
                width/(columns*(arrays+1)) + ‚" height="‘ +
                ((height-50)/maxval) * DrawGraph.arguments[j][i+1] + ‚"></td>‘)
        }
        document.write( ‚<td width="‘ + width/(columns*(arrays+1)) +
                ‚px" valign="bottom" align="center"></td>‘ )
    }   

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

    document.write( ‚</tr><tr height="15px">‘ )
    // Hodnoty
    for( i=0; i<graph1.length; i++ ) {
        for( j=3; j<DrawGraph.arguments.length; j++ ) {
        document.write( ‚<td valign="top" align="center"><font size=1>‘ +
                DrawGraph.arguments[j][i+1] + "</font></td>" );
        }
        document.write( ‚<td valign="top" align="center">&nbsp;</td>‘ )
    }   

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:

    document.write( ‚</tr><tr height="35px">‘ )
    // Hodnoty osy x
    for( i=0; i<graph1.length; i++ ) {
        document.write( ‚<td valign="top" align="center" colspan="‘ + arrays +
                ‚"><font size=1>‘ +
                DrawGraph.arguments[2][i+1] + "</font></td>" );
        document.write( ‚<td valign="top" align="center">&nbsp;</td>‘ )
    }   
    document.write (‚</tr></table>‘)
}

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

DrawGraph( 400, 250, xaxis, graph1, graph2, graph3 )
DrawGraph( 400, 110, xaxis, graph1, graph2, graph3 )

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

Žádný příspěvek v diskuzi

Odpovědět