C# - Webes grafikon kontrol készítése

forráskód letöltése
Egy web oldalon táblázatos formában megjelenített adathalmaz sok esetben nem annyira szemléletes, mintha az adatokat mondjuk egy grafikonon is ábrázolnánk.
Ebben a példában készítünk egy olyan web kontrolt, melyet felhasználva a grafikon egy-egy oszlopa egyszerűen megjeleníthető, annak tetszőleges érték adható, így a megjelenítendő adathalmazból már könnyedén felépíthetünk egy tetszőleges grafikont a web lapunkon.
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);
    }