Jak na grafy v ASP?

Toužíte po pěkné anketě, nebo byste rádi graficky zobrazili návštěvnost svých stránek, kterou máte v databázi, ale nevíte co s ní? Zde se dozvíte, jak vytvořit graf hodnot.

Hodnoty v grafu budeme v tomto příkladu brát z tabulky Hodnoty ze souboru data.mdb, který má dva sloupky. Id jako primární klíč, obsahující unikátní číslo, a sloupek hodnota, který naplníte daty, jež potřebujete převést do grafu.

Nechcete-li složitě tvořit tuto databázi, můžete si ji stáhnout z adresy http://www.netday.cz/web/examples/grafy/db.zip

Vytvoříme si tabulku a do každého sloupku vložíme obrázek radek.gif; jako parametr Width mu zadáme patřičnou výšku, která je ve správném poměru s ostatními hodnotami.

<%

Set Conn = Server.CreateObject("ADODB.Connection")

Conn.Open "DRIVER={Microsoft Access Driver <.mdb)};" & _

" DBQ=" & Server.MapPath("data.mdb")

'Spojili jsme se s databází data.mdb

%>

<table bgcolor="000000" cellspacing="1" cellpadding="0">

<tr>

<td>

<table bgcolor="FFFFF">

<tr>

<%

maxVyskaSloupek = 200 'výsledná výšky tabulky v pixelech resp. výšku nejvyšší hodnoty.

intSirkaSloupce = 10 'šířka jednoho grafu v pixelech.

'Zjistíme maximální hodnotu, která se má zobrazit v grafu.

SQLmax = "Select Max(hodnota) as cislo from hodnoty"

Set SQLmax = Conn.Execute(SQLmax)

intMax = SQLmax("cislo")

intCislo = maxVyskaSloupek/intMax

'Proměnná intCislo nyní obsahuje hodnotu, která určuje, kolik pixelů je 1.

SQL = "Select hodnota from hodnoty"

Set SQL = Conn.Execute(SQL)

'Vybereme sloupek hodnota a všechny jeho řádky z tabulky hodnoty.

Do Until SQL.EOF

hodnota = SQL("hodnota")

%>

<td valign="bottom">

<img src="radek.gif" width="<%=intSirkaSloupce%>" height="<%=Left(hodnota*intCislo,5)%> alt="<%=hodnota%>">

</td>

<%

SQL.MoveNext()

Loop

%>

</td>

</tr>

</table>

</tr>

</table>

<%

Conn.Close

%>

Tento kód zajistí následující výstup:

Pozorný čtenář si jistě všiml možnosti kolize, která může nastat při velkém množství hodnot. Konkrétně mám na mysli neúměrně velkou šířku tabulky.

Tento problém se dá vyřešit velice jednoduše. Například stačí vložit následující kód před <td valign="bottom">.

<%

x = x + 1

If x = 56 or x = 112 or x = 168 Then

%>

</tr>

<tr>

<%End if%>

Tím se zajistí "odřádkování" grafu, který „nepoleze“ mimo obrazovku, ale bude pokračovat na dalším řádku.

Jak to funguje? Při vypisování dat z databáze běhá cyklus neustále dokola a při tom se přičítá do proměnné x jednička. Jakmile nastane situace, kdy je v proměnné x 56, vloží se do HTML kódu konec řádku(</tr>) a začátek nového(<tr>).

Kód by se jistě dal zlepšit, ale toto řešení je myslím natolik jednoduché a čitelné, že jej pochopí většina čtenářů, kteří se o danou problematiku alespoň částečně zajímají.