Veri tabanında ya da başka yerlerde barındırdığımız verilerin birbirleriyle ilişkisi sonucu grafiksel raporlar veren bir nesnedir.Bir Chart kontrolünün kullanımına değinmeden önce, oluşturacağımız grafik üzerinde bazı işlemleri gerçekleştirmek ve çeşitli özellikleri değiştirmek için bazı ek metodları mevcuttur.
- AddTitle Metodu; Grafiğin başlığını belirtir.
- AddLegend Metodu; Grafik verileri hakkında bilgi sunmamıza yarar.
- AddSeries Metodu; Grafik üzerindeki x ve y eksenlerinde görüntülenecek olan değerleri belirtebiliriz.
Şimdi sade bir Chart kontrolü kullanalım.
@{
var GrafikCiz = new Chart(500, 500);
GrafikCiz.AddTitle("Gençay Yıldız Grafik").AddLegend("Gençay Yıldız").AddSeries("Değerler", xValue: new[] { "Ahmet", "Necati", "Mustafa", "Gençay" }, yValues: new[] { "4", "6", "1", "23" }).Write();
}
Yukarıdaki kod bloğunun oluşturacağı grafik aşağıdaki gibidir.
Burada AddSeries metodunun kullanışını biraz inceleyelim.
“name” parametresiyle verilen değerlere isim verilir.
“ChartType” parametresiyle grafik türünü belirtebiliriz.(Alacağı değerler; Bar, Area, Pie, Column, Line, Stock)
“ChartArea” parametresiyle x ve y kordinatları belirlenir.
“.Write()” metodu ise, grariğin belirtilen alana, verilen ayarlarla oluşturulmasını sağlar.
Dikkat !!! Oluşturduğumuz grafik varsayılan olarak “jpeg” tabanlı görüntülenmektedir.
Şimdi ise grafiğimizde biraz değişiklik yapalım.
@{
var GrafikCiz = new Chart(500, 500);
GrafikCiz.AddTitle("Gençay Yıldız Grafik").AddLegend("Gençay Yıldız").AddSeries("Değerler", chartType: "Bar", xValue: new[] { "Ahmet", "Necati", "Mustafa", "Gençay" }, yValues: new[] { "4", "6", "1", "23" }).Write(format: "png");
}
Dikkat ederseniz, AddSeries metodunun içinde, “chartType” parametresinin değeri “Bar” olarak değiştirildi.Haliyle grafiğimizin şekli aşağıdaki gibi oldu.Ayrıca Write metodunun içine “format” parametresiyle “png” değeri yazılmıştır ve grafik “png” tabanlı oluşturulmuştur.
Son olarak bir veri kaynağından beslenen grafik oluşturalım.
Model katmanımızda “Insan.cs” adında bir sınıf oluşturuyoruz.
public class Insan
{
public string Ad { get; set; }
public int Yas { get; set; }
}
Controller katmanımızda Grafik adında bir Action metod oluşturuyoruz.
public ActionResult Grafik()
{
Insan i1 = new Insan { Ad = "Gençay", Yas = 21 };
Insan i2 = new Insan { Ad = "Ahmet", Yas = 12 };
Insan i3 = new Insan { Ad = "Mehmet", Yas = 53 };
Insan i4 = new Insan { Ad = "Necati", Yas = 23 };
Insan i5 = new Insan { Ad = "Mustafa", Yas = 56 };
List<Insan> Insanlar = new List<Insan>() { i1, i2, i3, i4, i5 };
ViewBag.Insanlar = Insanlar;
return View();
}
Grafik Action metodunun View katmandaki .cshtml sayfasında aşağıdaki kodları yazalım.
@{
var GrafikCiz = new Chart(500, 500);
List<MvcApplication4.Models.Insan> Insanlar = ViewBag.Insanlar as List<MvcApplication4.Models.Insan>;
if (Insanlar != null)
{
GrafikCiz.AddTitle("Gençay Yıldız Grafik")
.AddLegend("Gençay Yıldız")
.AddSeries(name: "İnsanlar", chartType: "Line")
.DataBindTable(Insanlar)
.Write(format: "gif");
}
}
Burada dikkat ederseniz eğer, DataBindTable metoduna, Insanlar koleksiyonunu veriyoruz.Bu metod sayesinde insanların analizi sonucu grafik oluşturulacaktır.
Makalemizi bitirmeden önce son olarak Chart nesnemizin alacağı, “ChartTime” parametresinden bahsetmek istiyorum.”ChartTime” parametresi ile grafiğimize gölge ve 3 boyut kazandırabiliriz.
“ChartTime” parametresi aşağıdaki değerleri almaktadır.
“Blue, Green, Yellow, Vanilla, Vanilla3D”
Örnek kullanımı aşağıdaki gibidir.
@{
var GrafikCiz = new Chart(500, 500, ChartTheme.Yellow);
List<MvcApplication4.Models.Insan> Insanlar = ViewBag.Insanlar as List<MvcApplication4.Models.Insan>;
if (Insanlar != null)
{
GrafikCiz.AddTitle("Gençay Yıldız Grafik")
.AddLegend("Gençay Yıldız")
.AddSeries(name: "İnsanlar", chartType: "Line")
.DataBindTable(Insanlar)
.Write(format: "gif");
}
}
Bu makelemizinde sonuna gelmiş bulunmaktayız.Artık MVC’de Chart nesnesini sorunsuz kullanabilir ve grafiksel sonuçların keyfini tadabilirsiniz.Bu nesne, Asp.NET Web Form mimarisinden ziyade MVC mimarisinde daha kullanışlı ve esnek bir yapıya sahip.
Sonraki yazılarımda görüşmek dileğiyle..
İyi çalışmalar..