CHART.JS JQuery Plugin’ini Asp.Net MVC Projelerinde Nasıl Kullanırız ?

Merhaba,
Yine bir jquery pluginin, asp.net mvc projelerinde nasıl kullanılacağına dair bilgilendirme yazısı hazırladım. Dökümanların ingilizce olması ve bu pluginlerin kullanımında dataset’in Json formatta hazır verilmesi, api ile kullanımında özellikle yeni başlayanlar için korkutucu olabiliyor. Örneğin ben.. ama artık korkmuyorum o kadar çok uygulama yaptım ki artık işi kaptım:) Size de tavsiyem ilk deneyim uzun sürsede sonrasında öğreniyorsunuz ve kodlama süreci azalıyor. Panik Yok!

Serime, ChartJs ile devam ediyorum.Bu bilgilendirmede sadece bir grafik göstereceğim ama, her gün bir başka grafiği anlatmayı planlıyorum. İlk grafiğimiz Pie Grafik. bknz: Pie

Yine Visual Studio Ide’mizde daha önceki anlatımlarımda olduğu gibi empty bir MVC proje başlatıp bir tane homecontroller ve buna bağlı bir view açıyoruz.Ardından, Veritabanı bağlantımızı yapıp Ado.Net Entity Model eklemesi yapıyoruz.Sonra başlıyoruz kodlamaya.

HomeController içerisinde, veritabanındaki personel tablomuzdan, ülke ve ülkelerin sayılarını entityframework query’si ileçekiyorum. Kodların açıklamasını yine kod üzerinde yaptım. Aşağıdadır :

[HttpGet]//Methodun bir get işlemi yapacağını söylüyorum
public JsonResult GetDataforChart() { //Methodun döndüreceği veri Json formatta olacak
using (DBPersonelTakipEntities dc = new DBPersonelTakipEntities()){
//personellerin ülke ve şehir bilgilerini çekiyorum sadece
//ülkeleri groupby ile prouplayıp sayısını hesaplıyorum
var query = dc.Tbl_Personel //personel tablosuna eriş
.GroupBy(p => p.Country)//Country sütununu groupla
.Select(g => new {//Tablodan istediğim verileri
country = g.Key,//benim belirlediğim değişkene set et
count = g.Count()//Country değerini say ve set et
}).ToList();//Birdn fazla kayıt olabilir o nedenle tolist diyorum
//Client tarafında json veri üzerinde çalışacağımda, Json bir değer döndürüyor methodum
return Json(new { data = query }, JsonRequestBehavior.AllowGet);
}


Şimdi Html tasarımı yapmaya başlıyorum. Yine tagları yazarken yorum ile açıkladım.

Ekran görüntüsü koymaya çalışıyorum ki elimizle yazalım kopyala yapıştır yaparak kendimize kötülük ediyoruz.

Javascript kodlarımızı yazmadan önce, ChartJs’i kullanabilmemiz için gereken linkleri projemize ekliyoruz. Bunun için CDN’den faydalanıyorum. CDN’de nedir diyenler için bknz:cdn


https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js

Tasarımımızın ardından client tarafta bulunan javascript kodlarımızı yazmaya başlıyoruz. Buradaki hedefimiz, önce server’a bağlanmak, methodumuzun bize verdiği json veriyi kullanarak grafiğimizi çizdirmek. Ardından, grafik renklerle çizileceği için her rengin ne ifade ettiğini, grafiğin yan tarafında göstermek.
Kodlar açıklamasıyla birlikte aşağıdadır.

$(document).ready(function () {//Tüm Dom ağacı yüklendikten sonra çalış diyoruz
$("#btnGeneratePieChart").on('click', function (e) {//butona tıklanma olayını dinliyoruz
e.preventDefault();//Varsayılan event'ın kaldırılmasını söylüyoruz'
GenerateGrafic();
});
function GenerateGrafic() {
$.ajax({//Ajax yardımıyla server tarafına erişiyorum
type: "GET", //Methodumuzun ne iş yaptığını belirtiyoruz
url: "/home/GetDataforChart", //controller/Method
contentType: "application/json; charset=utf-8",
dataType: "json",//Alacağımız verinin tipini söylüyoruz
success: OnSuccess_,//Çağrının olumlu sonuçlanmasıyla çağıracağım fonksıyonu soyluyorum
error: OnErrorCall_//Çağrının olumsuz sonuçlanmasıyla çağıracağım fonksıyonu soyluyorum
});
function OnSuccess_(response) {
var aData = response.data;
var arr = []; //Grafik çizdirmek için kullanacak olduğum array
var arrColor = ["#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6"]; //renk dizim
//renk kaydı veritabanında olmadığı için javascript kısmında ekliyorum

$.each(aData, function (inx, val) { //inx burada index değeridir.
var obj = {};
obj.color = arrColor[inx];//nesnenin, color değerine arrcolor array'inden sırasıyla değer atıyorum'
obj.value = val.count;//grafiğin sayısal değeri
obj.label = val.country; //sayısal değerin ifade ettiği ülke
arr.push(obj); //netilekleri eklenen onjecyi arraye set ekliyorum

$('', {}).css({ //Renk eklemek için her li tagına bir input append ediyorum
'background-color': obj.color,//bu inputları renkli kutular haline getirmek için
float: 'left',//bazı css'ler yazıyorum'
width: '20px',//genişlik
height: '20px',//yükseklik

border: '1px solid rgba(0, 0, 0, .2)'//kutular görünür olsun diye solid veriyorm
}).appendTo('ul.justList')
//aynı zamanda label'ın yanına hangi renk olduğunuda gösterelim
//Renklerin anlamlarını da labelların anlamlaeınıda labellarda gösterelim
$('

', { html: obj.label }).appendTo('ul.justList')

});
var ctx = $("#dvChart").get(0).getContext("2d"); //Grafik çizdireceğim canvas alanına erişiyorum
//bunun anlamı jquery koleksıyonun bulunduğu domda ilk düğümü getir demektir.
var myNewChart = new Chart(ctx).Pie(arr);//arr dizininin değerleriyle grafik çizdiriyorum
}
function OnErrorCall_(response) {//SErverdan gelen cevabın 500,404 gibi herhangi bir hata olması durumunda
alert("HATA" + response);//hatayı aleert ediyoruz
}
}
});

Mini projemin çalışır hali aşağıdaki gibidir.

Elimden geldiğince, kısa zamanımda ChartJS’in api ile kullanımını anlatmaya gayret ettim. Umarım faydalı olmuştur. Sorularınızı yorum bırakın lütfen..

Nisanur Bulut

Kaynakça:
http://www.shilling.co.uk/survey/Charts/docs/