Merhaba,
Uygulamamızı yazdık,veriler düşmeye başladı ve son olarak bu veriler ile ilgili bir de istatistikleri göstermek üzere bir sayfa oluşturma isteğimizi chart.js ile sağlayabiliriz.
Chart.js ile ilgili kullanım dökümanına şu linkten erişebiliriz. Versiyonlarına ise şuradaki linkten erişebiliriz.
Uygulamada chart.js versiyonumuz 2.2.2 olacaktır. Browser bazlı olduğu için .net kütüphanesi yada mvc nin versiyonu ile ilgili herhangi bir kısıtlama yok. Önemli olan verileri Array olarak almak.
Sayfada verileri alırken,bunu ajax isteği ile başlatıp controller dan partial olarak döndürülen sayfalar üzerinden chart.js uygulamalarının yapılandırmalarından bahsedeceğim.
Sayfanın layout’una https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js linkini script içerisinde vererek başlayalım. Sayfayı yüklerken partial larda kullandığımız fonksiyonları tanıması için bu gerekli.
2.ci olarak sayfa için oluşturduğumuz javascript dosyamız içerisinde sayfa yüklenirken çağıracağı fonksiyonu yazıyoruz.
controller a yapılan istek sonrası dönecek olan verinin (html türünde) bestSellerMatSec id nin içerisine gömüleceğini belirtiyoruz.
Verilerin gösterileceği sayfadaki dizilime ilişkin görsel
Sayfa yüklenirken çalışan fonksiyon ile controller a bir istek yaptığımızı söylemiştik. Şimdi de bu işlemde neler yaptığımıza bir bakalım.
Controller tarafında veri tabanından verinin alınması ve string olarak hem malzeme isim listesinin hemde bunlara ait sayıların olduğu listenin (array olarak) çekilmesini talep ediyoruz. Buradan gelecek verileri controllerdan view e aktarmak için ise viewbag dinamik nesnesini kullanıyor olacağız.
Şimdi de veri tabanına yapılan istek ile bu verilerin alınması için nasıl bir yol izlenmiş ona bakalım.
Servis tarafındaki methodumuzdan parametrelerini doldurup göndermesini bekliyoruz. Dönüş tipinin void olması kafa karıştırmasın,parametreleri out ile işaretlediğimiz için buradan gidecek olan veriler controller tarafından kullanılabilir olacaktır.
Db tablomuzda malzemeye göre gruplama yaparak verileri çoktan aza doğru olan 10 veriyi alıyoruz. Daha sonra buradaki verileri string tipinde list koleksiyonuna alıyoruz ve her veriyi join fonksiyonu ile virgülle ayırıyoruz.
Controller da viewbag nesnemize bunları atıyoruz ve partialview ün dönmesi sonrası neler yapılacağına bir bakalım şimdi de.
Burada labels alanımıza isimleri Raw methodu ile controllerdan gönderdiğimiz verileri html sayfasında gösterilmesini sağlayacak şekilde alıyoruz. @Html.Raw(ViewBag.MatName_List)
_colors parametresi ile bir dizi renkleri (gösterimde bulunacağımız veri adedince) belirleyebiliriz. default olarak gri gelir tek renk yazılırsa tüm veriler o renkte görülür.
datasets in altında ise x aksisinde görünecek olan değerleri almak için data parametresine @Html.Raw(ViewBag.MatCount_List) ile adet listesini alırız.
new Chart ile yeni bir çizelge oluşturmak istediğimizi belirtip,type ında ise hangi tür chart ın kullanılacağını tanımlıyoruz. Biz burada polarArea tipindekini kullanmak istedik.
data yada yukarıda controllerdan verileri çekip atadığımız yine aynı isimdeki parametreyi atıyoruz. farklı bir isimde kullanılabilir,denk geldiğinden o şekilde bıraktım.
options alanında ise kişisel düzenleme yapmamızı sağlıyor. örneğin chart ın adının ne olması gerektiği,responsive davranıp davranmaması ile ilgili veya tooltip (hover özelliğinde) te hangi verilerin görünmesini istediğinizi (title ve label larda) belirtebilirsiniz. beginatzero ile y teki çizelgenin 0 dan başlamasını sağlayabilirsiniz.tooltipte yine sayısal verileri binden büyüklerse regex leyip virgüllü bir şekilde gösterebilirsiniz.
Sonuç olarak sayfaya da bir bakalım.
chart ın üzerine geldiğimizde malzeme kodu ve ismine ilişkin veriler görülebilir olacaktır. js dosyası içinde chart ın yapılandırmaların da
Chart.defaults.global.legend = {
enabled: false
};
yazmıştık,false diyerek üst kısmında her malzemeye ait verilerin görülmesini engelledik. Eğer engellemeseydik label ların üzerine tıklayarak görünmesini istemediklerimizi chart tan çıkarabiliyor olurduk.
Polar Area nın kullanımı ile ilgili aktarabileceklerim bu kadar. Yazının devamında diğer chartlar ile ilgili de yazmaya devam edeceğim.
Sağlıcakla.
{ } Veritabanı & Yazılım Geliştirme 