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
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..
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[quote][/quote]
İlgili klasör üzerinde ASPNET isimli user’ın yazma-okuma hakkı olmayabilir. web.config’deki
<add key="ChartImageHandler" value="storage=file; timeout=20; dir=c:\TempImageFiles\;" />
ifadesini
<add key="ChartImageHandler" value="storage=file; timeout=20;" />
şeklinde değiştirin bakalım olacak mı?
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.
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
<add key="ChartImageHandler" value="storage=memory;timeout=20;dir=c:\TempImageFiles\;"/>
<add key="ChartImageHandler" value="storage=session;timeout=20;dir=c:\TempImageFiles\;"/>
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;"/>
Merhaba Hocam,
bende buna benzer bir örnek yaptım ancak şöyle bir problemim var. Diğelim ki bir anket yapıyoruz, bu anketin seçenekleri 5 elemana kadarsa herhangi bi problem yok, ancak 5 ten fazlaysa anket sonuçlarında sadece 5 tanesinin değeriniz yazıyor geri kalanlar yok. bu konu hakkında bi fikriniz var mı?
Teşekkürler
Getirmesi gerekir, SQL sorgunuzda bir problem olmasın? Bir de chart kontrolünün genişliği yeterli değilse göstermeyebilir. Width özelliğine daha büyük bir değer atamayı deneyin.
hocam sorgu ve genişlikten kaynaklanan problem değil. benim problemim, örneğin bir anket yaptım burda 10 tane seçenek var. bu 10 seçeneğin oy sayısına göre barchartta gösteriyorum. Bu on seçenekten 2-4-6-8-10. indexli olanları x axiste barchartta yazarken diğerleni yazmıyor ama bütün seçenkelerin sonuçlarını grafikte gösteriyor benimde yapmak istediğim 1-3-5-7-9. indexleride xvaluememberda gösterebilmek.
teşekkür ederim
Sorununuzun çözümü ile ilgili bir yazı hazırladım. Şu linkten ulaşabilirsiniz: http://www.umutluoglu.com/post/2010/08/21/aspnet-chart-kontrolunde-goruntuleme-sorunu.aspx
Merhaba,
Chart kontrolü kullanarak grafik oluşturdum. Grafik bar’ a tıkladığımda grafiğin altında bulunan datagrid’ e seçtiğim bar’ ı oluşuran bilgileri gruplandırmadan tablo biçiminde gösstermesini istiyorum. Mümkünmüdür? Teşekkürler.