Jak na sloupcovΘ grafy v ASP?
Tou₧φte po p∞knΘ anket∞ nebo by jste rßdi graficky zobrazili nßvÜt∞vnost sv²ch strßnek, kterou mßte v databßzi, ale nevφte co s nφ? V Φlßnku se nauΦφme vytvß°et sloupcovΘ grafy zcela zdarma bez pou₧itφ externφch komponent. Vφce v Φlßnku...

Tvorba databßze

Hodnoty v grafu budeme 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, kterΘ pot°ebujete p°evΘst do grafu.

Nechcete-li slo₧it∞ tvo°it tuto databßzi, m∙₧ete si ji stßhnout z adresy examples/grafy/db.zip.

P°evedenφ do tabulky

Vytvo°φme si tabulku a do ka₧dΘho slouku vlo₧φme obrßzek radek.gif, kterΘmu jako parametr Width 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 border="0" bgcolor="FFFFF">
<tr>
<%
maxVyskaSloupek = 200
intSirkaSloupce = 10

'Prom∞nnß maxVyskaSloupek obsahuje v²slednou v²Üku tabulky v
'pixlech resp. v²Üku nejvy₧Üφ hodnoty.

'Prom∞nnß intSirkaSloupe udßvß Üφ°ku jednoho grafu v pixlech.

SQLmax = "Select Max(hodnota) as cislo from hodnoty"
Set SQLmax = Conn.Execute(SQLmax)

'Zjistime maximßlnφ hodnotu, kterß se mß zobrazit v grafu.

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 jeho vÜechny °ß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:

Jak vÜe zlepÜit?

Pozorn² Φtenß° si jist∞ vÜiml mo₧nosti kolize, kterß m∙₧e nastat p°i velkΘm mno₧stvφ hodnot. KonkrΘtn∞ mßm namyslφ ne·m∞rn∞ velkou Üφ°ku tabulky.

Tento problΘm se dß vy°eÜit velice jednoduÜe.

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φmto 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>).

Zßv∞r

Ka₧d² °ßdek by se dal jist∞ zlepÜit, ale toto °eÜenφ je myslφm natolik elegantnφ a jednoduchΘ, ₧e jej pochopφ v∞tÜina Φtenß°∙, kte°φ se o danou porblematiku, alespo≥ ΦßsteΦn∞ zajφmajφ.

VeÜkerΘ zdrojovΘ k≤dy je mo₧nΘ stßhnout z tΘto adresy.

Zden∞k Cendra
ceskywap@ceskywap.cz