A grafikon kirajzolásához azt a trükköt használjuk fel, hogy egy kép megjelenítésénél (<img …) előírhatjuk annak szélességét és magasságát. E két érték alapján kerül a kép megjelenítésre, függetlenül annak valós, eredeti méretétől. Így a képet nagyíthatjuk, kicsinyíthetjük. Ha egy olyan képünk van, mely akár 1 x 1 pixel méretű és ezt nagyítjuk, akkor létrehozhatunk egy tetszőleges magas, vagy tetszőleges széles oszlopot, mely a grafikon egy-egy oszlopát adja. Nyilvánvaló, hogy az oszlop méretének arányosnak kell lennie az aktuálisan megjelenítendő értékkel és a grafikonunk máris kész.
Első lépésként hozzunk létre egy megjelenítendő adathalmazt. A kódokat script formájában közvetlenül a WebForm1.aspx HTML kódjába helyezzük el.
<script language="C#" runat="server">
Az adatforrást most egy ArrayList típusú tömb képezi.
Ebbe véletlenszerű értékeket a Load eseményénél helyezünk el, így minden oldal betöltésekor változik az adathalmazunk és így a megjelenített grafikon is.
void Page_Load(Object sender, EventArgs e)
{
Random r = new Random();
if (!IsPostBack)
{
al = new ArrayList();
Egy ciklus segítségével elhelyezünk tehát 10 db véletlenszerű számot a tömbbe.
for (int i = 0; i<10; i++)
{
al.Add(r.Next(190)+10);
}
Ezeket az adatokat meg is jelenítjük egy DataGrid-ben.
DataGrid1.DataSource = al;
DataGrid1.DataBind();
}
}
A Load esemény létrejöttéhez ne felejtsük el az AutoEventWireup paramétert igazra állítani.
<%@ AutoEventWireup="true"...
Az adatok adottak, most nézzük, hogy miként áll elő a grafikon. Készítünk egy a.gif néven mentett képet, mely 20 pixel széles és 1 pixel magas. Ebben egy vízszintes irányú színátmenettel történt a rajzolás. Így ha ezt elkezdjük nyújtani függőleges irányba, akkor egy olyan oszlopot kapunk, mely vízszintes irányba színátmenetes. Ha csak egyszínű oszlopokat szeretnénk, akkor elegendő 1 x 1 pixeles képet használnunk.
Ismét egy scriptet helyezünk el a HTML kódba, mely generálja azokat a HTML parancsokat, melyre az adott grafikon megjelenítéséhez szükségünk van.
Kezdeményezünk tehát egy ciklust, mely végigmegy a 10 darab adaton.
for (int i=0; i<10; i++)
{
Kiszámítjuk az adott oszlop, vagyis a kép bal felső koordinátáját az „al” tömb aktuális értéke alapján.
top=315-(int)al[i];
left=i*10+300;
A kliens felé visszaküldendő HTML-be a Response objektum Write függvényével tudunk tetszőleges szöveget írni. Ezt használjuk most arra, hogy a szükséges <img... kódot elhelyezzük. Ebben a kép magasságát is szabályoznunk kell a Height stílussal, melynek értékét szintén a tömb adott eleméből vesszük.
Response.Write("<img style='height: " + al[i] + "px; TOP: " + top + "px; Z-INDEX: 101; LEFT: "+left+"px; POSITION: absolute; width: 8px;' src='\\WebChart\\a.gif'>");
left+=200;
Response.Write("<img style='height: " + al[i] + "px; TOP: " + top + "px; Z-INDEX: 101; LEFT: "+left+"px; POSITION: absolute; width: 8px;' src='\\WebChart\\b.gif'>");
}
%>
Ha olyan grafikont szeretnénk, mely nem függőlegesen álló oszlopokból, hanem vízszintes, fekvő oszlopokból állna, akkor a teendőnk csak annyi, hogy a képet vízszintes irányba nyújtsuk és függőlegesen pozícionáljuk egymás alá a többi oszlopot.