Veritabanında saklanılan kayıtlarla web sitelerimizde raporlama yaparken grafiksel tablolar oluşturmak en önemli ihtiyaçlarımızdan birisidir. ASP.NET uygulamalarında bu tip ihtiyaçları gidermek için GDI+ nesnelerini kullanabileceğimiz gibi üçüncü parti kontrollerden de faydalanabiliriz. GDI+ nesnelerinin kullanımının zorluğu ve oluşturacağımız şekillerin çokta göze hoş gelmeyeceğini söylemeye gerek yok sanırım. Üçüncü parti kontrollerinde ücretli olması, ücretsiz dağıtılanlarında çok kullanışlı olmaması bizleri bugüne kadar çok zengin olmayan grafik tablolarla çalışmak zorunda bırakmıştır. Microsoft'un geçtiğimiz günlerde kullanıma açtığı
Chart adındaki kontrol ile herhangi bir üçüncü parti kontrole veya GDI+ nesnelerine gerek kalmadan çok hızlı şekilde mükemmel grafik tablolar üretebilmekteyiz. Bu yazımızda Chart kontrolünün kurulumunu ve bu kontrol ile temel bir grafik tablosunun nasıl oluşturulabileceğini inceleyeceğiz. Aşağıdaki Chart kontrolüyle hazırlanmış birkaç grafik tablo sanırım bizleri ne tarz grafikler oluşturabileceğimiz konusunda heyecanlandıracaktır!
Resim: ASP.NET 3.5 Chart kontrolüyle hazırlanmış örnek grafik tablolar
Daha önceden
Dundas isimli chart kontrolleri üreten firmanın hazırladığı kontrolleri inceleme fırsatınız olduysa aslında yukarıdaki grafikler size çokta yabancı gelmeyecektir. Zira geçtiğimiz yıllarda Microsoft'un yaptığı yatırımlar sonucunda Dundas grafiklerinin Microsoft uygulamalarında ücretsiz şekilde kullanılması planlanıyordu. Bu yazımızda inceleyeceğimiz Chart kontrolü bu çalışmaların sonucunda .NET Framework'ün yapısına katılıyor. Şu an için .NET Framework'ün 3.5 SP1 sürümü üzerinde çalışan bu kontrolün .NET Framework 4.0 ile artık mimariyle bütünleşik olması bekleniyor.
Gelelim kontrolü nasıl temin edip kullanabileceğimize. Yukarıdaki paragraftanda anlaşılacağı gibi Chart kontrolünü kullanan uygulamamız .NET Framework 3.5 SP1 üzerinde çalışıyor olmalı. Yine Visual Studio 2008'de bu kontrolü sorunsuz şekilde kullanmak için Visual Studio 2008 SP1'in de kurulu olması gerekiyor. Chart kontrolü .NET Framework 3.5 ile bütünleşik gelmediği için iki farklı dosyayı bilgisayarımıza indirmemiz ve kurmamız gerekecek. Bu dosyaları aşağıdaki linklerden indirebilirsiniz.
Microsoft Chart Kontrolü Chart kontrolü için Visual Studio 2008 eklentisi Yine
bu linkten indireceğiniz örnek projeden Chart kontrolü kullanılarak hazırlanmış birçok grafiği inceleyebilirsiniz. Yukarıdaki dosyaların kurulumlarını yaptıktan sonra Visual Studio 2008 üzerinde geliştireceğimiz bir projede Chart kontrolünü inceleyebiliriz.
Öncelikli olarak Chart kontrolünün tıpkı DataList, GridView vb. veri kontrollerinde olduğu gibi DataSource nesneleriyle çalıştığını söyleyebiliriz. Yani veritabanından veya bir nesneden gelen verilerin bu kontrole DataSource özelliği üzerinden bağlanması gerekecektir. Veritabanından gelen kayıtların key-value çifti şeklinde iki kolona sahip olması grafik raporu oluşturmak için yeterli olacaktır(Mağaza-Satış miktarı, Öğrenci-Not ortalaması gibi). Bu ilk örneğimizde Northwind veritabanındaki Product tablosundan belirli bir kategoride yer alan ürünlerin fiyatlarını grafik tablo üzerinde çizmeye çalışalım. Gerekli bileşenleri kurduğumuzda Chart kontrolü Toolbox'ın Data kısmındaki kontrollerin içerisinde bulunacaktır. Bu kontrolü formumuz üzerine sürükleyip bırakıyoruz.
HTML kodlarında görüleceği gibi Chart kontrolünün içerisinde
Series ve
ChartAreas adında iki alt elementi bulunmaktadır. Bu iki element aslında Chart kontrolü üzerinde yapılacak değişikliklerde en sık kullanacağımız kısımlardır. Bu elementlere aynı isimleriyle Chart kontrolünü seçip Properties penceresinden de erişebiliriz. Dilerseniz bu kontroller üzerinde işlemler yapmadan önce ilk olarak Chart kontrolünü veriye bağlayalım. Zira grafiğin bize sunacağı bilgiler bir veri kaynağından gelecektir. Bu işlem için sürükleyip bıraktığımız Chart kontrolünün sağ üst köşesindeki smart tag ikonundan açılan penceredeki
Choose Data Source kutusundan
New Data Source seçeneğine tıklıyor ve karşımıza çıkan pencereden bir veri kaynağına bağlanıyoruz. Burada
SQL Server'da bulunan
Northwind isimli veritabanının içerisindeki
Products tablosu ile çalışıyor olacağız. Çalıştıracağımız sorgu SELECT ProductName, UnitPrice FROM Products WHERE CategoryID = 4 olacak.
Resim: SqlDataSource kontrolüyle Products tablosunda sorgunun oluşturulması
DataSource bağlama işlemi tabi ki grafiğin çizilmesi için yeterli olmayacaktır. Sonuç kümesinde getirilen hangi kolon kategori, hangi kolon değer taşıyan olacak, bunları da belirtmemiz gerekecektir. Chart kontrolümüzün Series özelliği görüntülenecek grafiğin biçimi, formatı ve görüntülenecek kolonlarla alakalı bilgieri saklamaktadır.
Series koleksiyonu içerisindeki içerisindeki
XValueMember özelliği X doğrusunda kullanılacak kolonu (sorgu sonucunda gelecek kolonlardan birisi),
YValueMember özelliği ise Y doğrusunda kullanılacak kolonu saklar. X doğrultusunda ürün isimlerini, Y doğrultusunda da fiyatları grafik olarak çizdireceğimiz için XValueMember'a ProductName, YValueMember'a da UnitPrice değerlerini atıyoruz. Tabi ki burada akla gelen bir diğer soru da farklı şekillerde grafikleri nasıl oluşturabileceğiz olacaktır. Yine Series özelliği içerisindeki
ChartType özelliğinden de oluşturulacak grafiğin şekli seçilebilir. ChartType seçim kutusunda karşımıza çıkan bol miktardaki grafikler gerçektende ne kadar farklı grafik tabloları üretebileceğimzin bir göstergesi! Aşağıdaki resimlerde bu seçimlerin yapıldığı özellikleri görebilirsiniz.
Resim: XValueMember ve YValueMember özelliklerinden X ve Y doğrultusunda kullanılacak kolonların seçilmesi
Resim: ChartType özelliğinden grafik tipinin seçilmesi
Yapılan değişikliklerin ardından Chart ve SqlDataSource kontrolümüzün oluşturacağı HTML kodlarını aşağıdan görebilirsiniz. Kodlardan da görüldüğü gibi Chart kontrolüne bağlanacak data source kontrolü ve değiştirilecek birkaç özelliğin sonucunda görsel olarak oldukça hoş bir grafik tablosu elde edebiliriz. Sayfamızı çalıştırdığımızda aşağıdaki resimde görülen grafiği elde edebiliriz.
<asp:Chart ID=Chart1" runat="server" DataSourceID="SqlDataSource1" Width="450px" Height="450px">
<Series>
<asp:Series Name="Series1" XValueMember="ProductName" YValueMembers="UnitPrice"
ChartType="Pie">
asp:Series>
Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
asp:ChartArea>
ChartAreas>
asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductName], [UnitPrice] FROM [Products] WHERE ([CategoryID] = @CategoryID)">
<SelectParameters>
<asp:Parameter DefaultValue="4" Name="CategoryID" Type="Int32" />
SelectParameters>
asp:SqlDataSource>
Resim: Oluşturduğumuz ilk chart tablomuz
2 Aralık 2008 Salı 00:34
Etiketler: chart, asp.net 3.5 Kategori: ASP.NET İşlemler: Arkadaşına Gönder | del.icio.us | Permalink | Yorumlar (4) | Yorumlar RSS
Yorumlar
Ocak 6. 2009 22:23
hocam oncelıkle gunlerdır boyle bir dokuman arıyordum sizin siteniz aklıma geldi..burda buldum....ama aklıma bir sey takıldı....
yukarıdakı 4 grafikli resimde 3.grafik gorsellıgını kullandıgımı dusunuyorum...ve yan karesındekı rakamları da 100 200 300 seklinde olsun diyelim...
grafik degeri 100 oldugunda farklı renk 200 oldugunda farklı renk 300 oldugunda farklı renk olmasını nasıl ayarlarım....ve yine o grafikteki...yanında gorunen sayıları ben istedigim degere gore degiştirebilirmiyim..bu konuda bilgi verirmisiniz....
simdiden tesekkur ederim..
Murat YUKSEL
Şubat 23. 2009 17:26
Invalid temp directory in chart handler configuration [c:\TempImageFiles\].
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.IO.DirectoryNotFoundException: Invalid temp directory in chart handler configuration [c:\TempImageFiles\].
EĞER PROJEYİ TEK BAŞINA ÇALIŞTIRIRSAM Bİ PROBLEM YOK FAKAT KENDİ PROJEMİN İÇİNİNDE ÇALIŞTIRDIĞIMDA YUKARIDAKİ HATAYI VERİYOR. YADIM EDERSENİZ SEVİNİRİM.
ŞİMDİDEN;
TEŞEKKÜRLER
Ertugrul
Şubat 23. 2009 22:08
İlgili klasör üzerinde ASPNET isimli user'ın yazma-okuma hakkı olmayabilir. web.config'deki
ifadesini
şeklinde değiştirin bakalım olacak mı?
ugur
Mart 9. 2009 10:15
teşekkür ederim. sorun çözüldü.
fakat şimdide cubuk grafikte 6veya8 sütündan sonrakilerin sütunlarını gösteriyor fakat yazılarını göstermiyor.Sığmıyor düşüncesi ile girafiği bütüttüm ama gene olmadı.
yardım ederseniz sevinrim.
şimdiden çok teşekkürler.
Bu arada web.config'e şu4 satırı yazdım.
Ertugrul
