Vizualizarea Grafică a Datelor folosind un Control de Tip Chart

Pentru varietate se prezintă două controale diferite de tip chart:

-un control open source, disponibil pe Internet, ca sursă şi ca biblioteci DLL, ZedGraph (http://www.codeproject.com/KB/graphics/zedgraph.aspx)

-unul furnizat drept componentă Web de către Office 2003 ( Office Web Component 11.0, control similar chart-ului din Excel); trebuie să dispunem de controalele aduse de către MS Office 2003; dacă nu, controalele pot fi descărcate de pe site-ul Microsoft.

În cazul folosirii controlului ZedGraph în aplicaţia care conţine un GridView şi o sursă de date, paşii de lucru ar putea fi următorii:

-In Solution Explorer cu buton dreapta mouse se cere Add Reference şi se localizează cu Browse şi se leagă la proiect cele două fişiere ZedGraph.dll şi ZedGraph.Web.dll, descărcate de pe Internet şi care conţin clasele cu care lucrează controlul web.

-Se construieşte în directorul aplicaţiei un subdirector de lucru numit ZedGraphImages, în care controlul îşi compune imaginile grafice.

-Se adaugă o pagină nouă pe care o vom numi WebFormZedGraph (Website / Add New Item şi alegem WebForms) şi pe ea (fişierul WebFormZedGraph.aspx.cs) se pune codul din funcţiile Page_Load (care leagă funcţia de tratare a evenimentului RenderGraph ) şi OnRenderGraph (care face reprezentarea grafică propriu-zisă). După cum se observă din cod, datele se preiau dintr-un DataSet adus din Cache, unde a fost pus de către pagina principală a aplicaţiei.

protected void Page_Load(object sender, EventArgs e)

{

this.ZedGraphWeb1.RenderGraph +=

new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);

}

private void OnRenderGraph(ZedGraph.Web.ZedGraphWeb z,

System.Drawing.Graphics g, ZedGraph.MasterPane masterPane)

{

DataSet ds = (DataSet)Cache["ProdCache"];

GraphPane myPane = masterPane[0];

myPane.Title.Text = "";

myPane.XAxis.Title.Text = "Produs"; myPane.YAxis.Title.Text = "Pret";

Color[] colors =

{

Color.Red, Color.Yellow, Color.Green, Color.Blue,

Color.Purple,Color.Pink,Color.Plum,Color.Silver, Color.Salmon

};

if (Request.QueryString["tip"] != null)

{

List<string> listaX = new List<string>();

PointPairList list = new PointPairList();

int i = 0;

foreach (DataRow r in ds.Tables[0].Rows)

{

listaX.Add(r[1].ToString()); // denumire produs

list.Add(0, (double)r[2], i++); // pret

}

switch (Request.QueryString["tip"])

{

case "Bare":

{

BarItem myCurve = myPane.AddBar(

"Curve 2", list, Color.Blue);

myCurve.Bar.Fill = new Fill(colors);

myCurve.Bar.Fill.Type = FillType.GradientByZ;

myCurve.Bar.Fill.RangeMin = 0;

myCurve.Bar.Fill.RangeMax = list.Count;

myPane.XAxis.Type = AxisType.Text;

myPane.XAxis.Scale.TextLabels = listaX.ToArray();

break;

}

case "Bare3D": break;

case "Pie3D": break;

case "Linie":

{

LineItem curve = myPane.AddCurve(

"Spline", list, Color.Red, SymbolType.Diamond);

curve.Line.IsSmooth = true;

curve.Line.SmoothTension = 0.5F;

curve.Line.Width = 2;

curve.Symbol.Fill = new Fill(Color.White);

curve.Symbol.Size = 10;

myPane.XAxis.Scale.TextLabels = listaX.ToArray();

myPane.XAxis.Type = AxisType.Text;

break;

}

case "Pie":

{

i = 0;

foreach (DataRow r in ds.Tables[0].Rows)

{

PieItem segment1 = myPane.AddPieSlice((

double)r[2], colors[(i++) % colors.Length],

Color.White, 45f, (i % 2 == 0) ? 0.2 : 0,

r[1].ToString());

}

break;

}

}

}

}

După cum se observă, funcţia OnRenderGraph este legată în Page_Load la delegatul evenimentului RenderGraph, aparţinând controlului.

this.ZedGraphWeb1.RenderGraph +=

new ZedGraph.Web.ZedGraphWebControlEventHandler(this.OnRenderGraph);

-Cu mouse dreapta, Choose Items pe ToolBox, cu Browse, se aduce controlul ZedGraph şi în trusa cu instrumente grafice şi apoi prin dragare se include controlul în pagina WebFormZedGraph.

-se adaugă la începutul paginii WebFormZedGraph şi using ZedGraph, respectiv using System.Collections.Generic dacă nu există, căci se lucrează cu astfel de colecţii.

-Pot fi stabilite diverse proprietăţi ale controlului folosind fereastra Properties; ca să păstrăm cât mai multe valori implicite, se poate draga controlul direct în codul html şi se adaugă tot aici doar proprietăţile Height = "500" Width = "500".