ASP.NET 3.5 Chart Kontrolü - Kurulum ve İlk Grafik Raporumuz

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