Asp.Net Bar Graph |
Windows platformunda bu iş çok önceden buyana yapılıyor olsada, web uygulamaları için Framework 4 ile daha az zahmetli hale geldi.
Nasılmı ?
Asp.Net içinde veritabanınıza bağlı raporlar oluşturmak Framework 4.0 öncesinde bile hayli zahmetli bir işti.İyi bir grafik çözümünü uygulamanızın Database' i içinden alarak kullanıcıya sunmanız için, sabırlı ve akıl küpü olmanız lazımdı.Zira ileri derece matematik ve geometri insanın hevesini kursağında bırakıyordu...En son üzerinde dağıldığım GDI + System Drawing namespace ile epey bir uğraşmıştım.Genel düz mantıkla bir resmi nesnesini,veriye göre ekrana çizdirmek, web uygulamalarında, windows uygulamalarına göre her zaman zor olmuştur.
Şimdi gelelim küçük bir uygulamaya...
Person_Hits adında bira access 2007 tablosunda sağdaki gördüğünüz Name ve Hits adında iki veri alanım var.İşin deneme kısmında olduğumuz için şimdilik iki veri bizim için yeterlidir.Veri tabanı olarak Access seçimi daha hızlı ve kolay olduğu içindir.Ms Sql de olsa yöntem aynı olacaktır.
Asp.Net uygulamanıza öncelikle ne yapmamız lazım bu yeni ChartDB adındaki Access veri tabanını uygulamaya dahil etmemiz lazım ve Web.Config dosyasını yazmamız lazım.Merak etmeyin çok kod yazmayacağız...
Connection String oluşturmak.
<connectionStrings>
<add name="ChartConnectionString"
connectionString="Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\ChartDB.accdb;Persist Security Info=True"
providerName="System.Data.OleDb"/>
</connectionStrings>
Bundan sonraki kısımda ise Web.config dosyanızdaki bazı ayrıntılara tekrar döneceğiz.Visual Studio Data Toolbox içinde bulunan Chart kontrol yani grafiklendirme aracımızı Visual Studio 2005 - 2008 sürümlerine daha sonradan dahil etmeniz gerekirken Visual Studio 2010 Ultimate sürümünde Tıpkı bir Grid view Form view gibi Data kontrolü görüyor olacaksınız.Buda işin güncelliğin güzelliği olsa gerek.Evet işin bu kadar basitleştirilmiş olması Web uygulamalarının önünü hayli açtığı kesin.
Chart data kontrolünüzü web sayfanızın dilediğiniz kısmına taşıyabilir yada aşağdaki gibi yazada bilirsiniz.
<!-- 1-Grafik alanı oluşturmak-->
<asp:Chart ID="Graf" runat="server">
<Series>
<asp:Series Name="GrafSeri">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="GrafAlan">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<!-- 1-Grafik alanı oluşturmak-->
Yukarıdaki kod blogunda bilmeniz gereken Datasource kısmı yani veritabanınıza bağlantı kuracağınız kısım ve Grafiğinizi oluşturacak olan X - Y serilerinin yazımaktır.Bu işlemi kolay yoldan kontrolü ekledikten sonra Desing görünümde "New Data Source" kısmından web.config dosyanızdaki belirlediğiniz veritabanınıza giden yolu gösterebilir yada şu şekilde düzenleyebilirsiniz.
<!-- Grafik alanı düzenlemek-->
<asp:Chart ID="Graf" runat="server" DataSourceID="PersonHitsSource">
<Series>
<asp:Series Name="GrafSeri" ChartType="FastLine" XValueMember="Name"
XValueType="Single" YValueMembers="Hits" YValuesPerPoint="2"
YValueType="Double">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="GrafAlan">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<!-- Grafik alanı düzenlemek -->
<!-- 2-DataSource -->
<asp:SqlDataSource ID="PersonHitsSource" runat="server"
ConnectionString="<%$ ConnectionStrings:ChartConnectionString %>"
ProviderName="<%$ ConnectionStrings:ChartConnectionString.ProviderName %>"
SelectCommand="SELECT * FROM [Person_Hits]"></asp:SqlDataSource>
<!-- 2-DataSource -->
Evet bir bakalım nasıl olmuş ?
Evet yandaki Personel hitlerinin grafik arayüzü gayet gerçekçi bir "pie" ile oluşturulmuş oldu.Doğrusu bu isimlerde personellerin bulunduğu bir işyerinde pekte hit yaparak büyük dilime sahip olacağımı zaten sanmıyorum :)
Bu Yazının Sponsorları
Güzel bir yazı olmuş teşekkürler
YanıtlaSil