Chart (Çizelge) Kontrolü

Eyl 06, 2013

Chart (Çizelge) kontrolü, ASP.NET tarafından oldukça zengin grafik raporları ve çizelgeler oluşturulabilmesini sağlayan bir kontroldür. Bu kontrol kendisine verilen veri kümesini istenilen türde işleyerek çıktılar üretmektedir. Chart Kontrolü içerisinde Series (Seriler), ChartArea (Çizelge Alanı) olmak üzere iki adet etiket bulunmaktadır. Bu etiketlerin açıklamaları aşağıdaki gibidir:

  • Series: Veriler için kullanılan alandır. Özellik olarak x ve y değerlerini içermektedir. Serilerin hangi ChartArea üzerinde gösterileceği ve ChartType (Grafik Tipi) özelliği yine bu etiket içinde belirtilmelidir. Chart kontrolü Point (Nokta), Fastpoint (Hızlı Nokta), Line (Çizgi) gibi birçok grafik tipini desteklemektedir.
  • ChartArea: Çizelgenin görüntüleneceği alanın görsel özelliklerinin belirtildiği bölümdür.
Chart kontrolünün kullanılabilmesi için Microsoft Chart Controls for Microsoft .NET Framework 3.5 bağlantısından indirilip kurulması gerekmektedir.

 Uygulama

Uygulamada veritabanından alınacak veriler ile Chart kontrolü kullanılarak bir grafik oluşturulacaktır. Kullanılan veritabanının ismi "OrnekDatabase", tablonun ismi ise "OrnekTablo"dur. OrnekTablo içerisinde "HaftaSayisi" ve "YapilanIs" adlı iki sütun bulunmaktadır. Veritabanın yapısı ve içerdiği veriler aşağıdaki gibidir:

Bu verileri Line türünde ve x düzleminde hafta sayıları y düzleminde ise yapılan iş sayıları olmak üzere gösterecek Chart kontrolünün ve veritabanı bağlantısının kodları aşağıdaki gibidir:

<asp:Chart ID="Chart1" runat="server" DataSourceID="OrnekDatabase">
    <series>
        <asp:Series ChartType="Line" Name="Series1" XValueMember="HaftaSayisi"
            YValueMembers="YapilanIs" YValuesPerPoint="2">
        </asp:Series>
    </series>
    <chartareas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>
    </chartareas>
</asp:Chart>
<asp:SqlDataSource ID="OrnekDatabase" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT * FROM [OrnekTablo]">
</asp:SqlDataSource>

Uygulama çalıştırıldığında aşağıdaki gibi bir çizelge üretmektedir: