A mellékelt alkalmazás megnyitásához és futtásához szükség van a ChartControlLibrary.dll-ben lévő ChartControl nevű web kontrolra.
A kontrol a következő HTML kódot generálja a web oldara:
<img src="a.gif" height=10 width=100>
Az a.gif egy olyan kép, melynek szélessége 1 pixel így az állomány mérete igen kicsi, gyorsan letöltődik a kliens böngészőjébe. A HTML kódban megadott width tulajdonság ezt az 1 pixeles képet fogja nyújtani, így a width segítségével szabályozhatjuk, hogy a grafikon oszlopa milyen hosszú legyen.
Ezt a trükköt felhasználva egyszerűen készíthetünk olyan grafikont is, mely nem vízszintes, hanem függőleges elrendezésű. Ebben az esetben célszerű olyan képet használnunk, mely 1 pixel magasságú. A kirajzolandó képnél ez esetben pedig a magasság lesz az ami állandóan változik és nem a szélesség, mint jelen esetben.
Az elkészített kontrolnál megadható, hogy a megjelenítendő érték milyen határok között mozoghat (Min, Max), valamint azt, hogy a maximum érték esetén a kép hány pixel széles legyen. Természetesen megadható az aktuális érték is a megadott határok között. Ezen adatokból a kontrol kiszámítja, hogy az IMG-hez mekkora szélességet kell megadni ahhoz, hogy a megjelenítendő érték méretarányos legyen.
A grafikonhoz felhasznált kép is egy property-n keresztül adható meg, így tetszőleges színű és mintázatú oszlopok lehetnek a grafikonunkban.
Nézzük miként is működik. Létrehozunk egy Min, Max nevű property-t a két értékhatár tárolásához, valamint egy Value property-t az aktuális érték megadásához. A Value értéke természetesen a Min és Max érték közé eshet csak. Ha a Value értéke egyenlő a Min értékével, akkor a kirajzolandó kép nulla szélességű lesz. Ha a Value értéke egyenlő a Max értékével, akkor a kirajzolandó kép szélességét a PixelMaxWidth property értéke határozza meg. Az itt tárolt szám lesz a maximális szélessége egy-egy oszlopnak pixelben mérve. Ha a Value értéke a Min és a Max közé esik, akkor a kép szélessége arányosan a nulla és PixelMaxWidth értéke között lesz.
Amikor változik a Min, Max, Value, vagy a PixelMaxWidth property értéke, akkor újra kell generáltatni a képet. Ehhez létrehozunk egy Calc nevű függvényt, melyeket a property-knek történő értékadáskor aktivizálunk.
public int Value
{
get {return chartValue;}
set
{
if (value>=min && value<=max)
{
chartValue = value;
Calc();
}
}
}
A Calc függvény a megadott értékek alapján kiszámítja, hogy hány százalék az aktuális szélesség és tárolja a percent változóba.
private void Calc()
{
percent=Convert.ToInt32(Convert.ToSingle(chartValue-min)*100f/Convert.ToSingle(max-min));
}
Amikor a kontrol HTML kódját kell generálnunk, akkor a kép szélességének meghatározásakor a már kiszámított százalék alapján meghatározzuk a szélességet pixelben és ennek eredményét írjuk a width tulajdonság értékéhez.
protected override void Render(HtmlTextWriter output)
{
this.RenderBeginTag(output);
output.Write("<img src=\""+picture+"\" height=10 width="+Convert.ToInt32(Convert.ToSingle(percent)/100f*Convert.ToSingle(maxWidth)).ToString()+">");
this.RenderEndTag(output);
}