Daha önceki yazımda yine CharJS Jquery plugini incelemiştim. Bu yazımda yine ChartJs ile devam edeceğim ancak, bu defa Line Grafiğin kullanımını irdeleyeceğim.
İnternet ortamına baktığımızda,gerek ChartJS’in dökümantasyonlarında gerekse net ortamında JSon bir dataset’le kullanıma dair bir çok örnek var. Ama projelerimizde kullanırken maalesef hazır bir dataSet yerine veritabanından sorgularla özelleştirerek çektiğimiz verileri grafiklerle görselleştirmek istiyoruz. Yeni öğrenenler için soru işareti ancak cevabı kolay bir json sorunu 🙂 JSon bilmek şart yani sonrası Json kullanarak pratik yapmak.
Daha önceki yazımın devamı niteliğinde olduğu için, proje açılması ya da Controller’da yazılacak olan GET methodundan bahsetmeyeceğim. bknz:Önceki Makalem
Yine html tasarımı hazır şekilde vererek ilerliyorum. Bu defa bir row açıyorum ve satırımı 8+4 şeklinde ayırıyorum.8’lik bölüme grafiğimi koyuyorum 4’lük bölüme ise click event’ini dinleyeceğim butonumu.
Senaryomuz şu şekilde: Butona tıklandığında çizgi grafiğimiz hafiften animasyonlu şekilde çizilmeye başlanacak. Y ekseninde benim belirlediğim 0 5 10 15 şeklinde artan bir array x ekseninde ise Ülke isimleri bulunacak. Hangi ülkeden kaçar tane bulunduğunu görselleştirmeye çalışacağız.
Sonrasında daha önceden yazılmış olan Server tarafındaki GET methodumu Ajax ile çağırarak grafikte gösterecek olduğum verilerin düzenlenmesine geçiyorum
Butona click event’i geldiğinde GenerateGrafic fonksiyonumu çağırıyorum. Bu fonksiyon içerisinde bir Ajax çağrısı yapacağız. Çağrımız sonucunda veritabanından verileri başarılı şekilde alırsak success foksıyonu içerisinde verilerin grafikte gösterime uygun hale getirilmesi işlemlerini yapacağız. Grafiğimiz için istediğimiz varsayılan ayarlalamaları yapıp grafiğimizi çizdireceğiz.
Biz veritabanından bir nesneler array’i çekiyoruz. Bunu daha iyi görebilmemiz için console.log diyerek verinin bütünden parçalanmış hallerine dair konsolda yazırma işlemini yaptırdım. Bunu neden yapıyoruz ? Bu grafikte bizim için 3 ana dataset var. x ekseni y ekseni ve grafiği çizecek olan veriler.Bu nedenle veritabanından gelen response.d datasının country kısmını x exseni için kullanıyoruz, count kısmını çizdirme verileri olarak kullanıyoruz. Y ekseni için gereken verileri ise biz tanımlıyoruz.
Verimizi aldıktan sonra veritabanından Json object şeklinde işlemeye başlıyoruz.
Grafik için verileri uygun hale getirdik şimdide çizdirmeye başlyoruz,önceki makalemde de yaptığım gibi canvas tag’ına erişiyoruz ve Chart için gereken line tipinde şu verileri kullanarak bir grafik olultur anlamına gelen kodu yazıyoruz.Böylelikle onSucces fonksıyonumuz sonlanıyor.
Son olarak ajax çağrımızın bir hata ile dönmesine karşılık OnError fonksiyonumuzda hata alert’ini veridiriyoruz ve Script tagları içerisine yazacağımız kodlar sonlanıyor.
Mini uygulamamızın sonucunda şu şekilde bir görüntü alacağız :
Tool Tip dikdörtgenine dikkat ederseniz radius 0. Ve ToolTip yazı fontu bold ve italik.
Bir sonraki ChartJs grafik incelemesinde görüşmek izere. Lütfen aklınıza takılanları yorum sekmesine bırakınız. Örneği uygularken kodlamayı unutmayın kopyala yapıştır sadece sizi tembelleştirir. Öğrenmek için uygulamak gerektiğini kendinize anımsatın. 🙂
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
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..
Jquery plugin’lerinin neredeyse hepsini şu an yürütmekte olduğum proje için kullanmaktayım. Yeni başlamış olduğum bu seride, pluginleri kullanırkende anlatmayı amaçlamaktayım. İlk yazıma bana en yakın gelen takvim uygulaması ile başlamak istedim.
Öncelikle Visual studio IDE’mizde bir Empty ama MVC template’te bir proje başlatıyoruz.Visual studi’da file->new->project ve ardından Asp.Net Web Application(.Net Framework) seçerek bu ekrana ulaşıyoruz.
Projemiz açılır açılmaz bir mdf dosyası ekliyoruz. Bunun için App_Data klasörüne gelip add-> new item sekmelerini seçiyoruz ve açılan pencerede sol menude bulunan data sekmesini seçiyoruz. Ve Projemize bir adet Sql Server DataBase ekliyoruz. Aşağıdaki Resimde bunu anlatmaya çalıştım.
SQL Server veritabanımızı projemize ekledikten sonra bu veritabanına bir planların tutulacağı bir tablo eklemesi yapıyoruz. Üst menüde bulunan View sekmesinden Server Explorer menüsünü açıyoruz.Burada eklediğimiz veritabanını incelediğimizde Tables sekmesini görürürüz ve yine sağ tıklayarak yeni bir tablo oluştur diyerek planlarımızı koyacağımız tabloyu oluşturmaya başlıyoruz.
Event tablosu için gereken sütunların oluşturulmasına dair sql dilinin kullanımı ve sonuç aşağıdaki resimdedir. Resme bakarak sizde tablonuzu oluşturabilirsiniz.
Tablomuz hazır olduğuna göre projemize yeni bir controller ve controller içinde gelen ındex methoduna bir tane view ekliyoruz. Bu adımları daha önceki makalelerimde bahsettiğim için geçiyorum.Bu adımları gerçekleştiremezseniz lütfen yorum atın ilgileneyim.
Veritabanımıza tablomuzu oluşturup controller ve view’imizi de oluşturduktan sonra, veritabanında bulunan tablomuza erişebilmek için ADO.NET Entity Model ekliyoruz. Diğer ekleme işlemlerinde de yaptığımız gibi, ekleme yapmak istediğimiz model klasörü üzerine gelip sağ tıklayıp add new item diyerek, sol menüde DATA sekmesi altında bulunan ADO.NET Entity Model’i seçiyoruz. Bu adımı daha iyi anlayabilmek adına, bilginiz yoksa, bu adımın öncesinde ADO.NET Entity Model hakkında kısa da olsa bilgi edinmenizi öneririm.
Controller’ımızı açıyoruz ve Veritabanında bulunan planları get ve save edecek olan metotlarımızı yazmaya başlıyoruz.Bu kodları, kod üzerinde yorum ile açıklamaya çalıştım. Sorularınız olursa lütfen yorum bırakınız. Veritabanından Veri Okunması
[HttpGet]//httpget diyerek methodumuz ne iş yapacağını belirtiyoruz.
public JsonResult GetEvents() { //Jquery ile planlarımızı takvim üzerine yerleştireceğiz
//bu nedenle JSonResult değer döndürüyoruz
using (DBCalendarEntities dc = new DBCalendarEntities())//Eklediğimiz entitymodel'dan bir örnek alıyoruz
{
var events = dc.Tbl_Events.ToList(); //bütün tabloyu select ediyoruz.Bu nedenle ayrıca select yazmıyorum.
//tabloda birden fazla değer olabilir o nedenle firstOrdefault yerine ToList diyorum
return new JsonResult { Data = events, JsonRequestBehavior=JsonRequestBehavior.AllowGet};
//Son olarak methodun döndürdüğü verinin Json Datası olduğunu söylüyor ve Data niteliğine events diyorum.
}
}
Veritabanına Plan Kaydedilmesi ve Güncellenmesi
[HttpPost]//httpost diyerek methodun kayıt işi yapacağını belirtiyoruz.
public JsonResult SaveEvent(Tbl_Events e) //Sonucu yine Json döndürüyoruz
{
var status = false;//Yapılan işlemin başarısını status değişkeninde tutuyorm
using (DBCalendarEntities dc =new DBCalendarEntities()){//Yine bir örnek alıyorum model'ımdan
if(e.EventID > 0)//eğer kaydetmek istediğim planın id değeri 0 dan büyükse
{
//Güncelleme yap diyorum. Bunun içinde bu planı tablomda bulup v değişkenine atıyorum.
var v = dc.Tbl_Events.Where(a=>a.EventID==e.EventID).FirstOrDefault();
if (v != null)//v değerinin null olup olmadığını kontrol ediyorum
{//ve sırasıyla parametre olarak gelen plan değerlerini, veritabanındaki değerlerle değiştiriyorum
v.Subject = e.Subject;
v.Description = e.Description;
v.Start = e.Start;
v.End = e.End;
v.IsFullDay = e.IsFullDay;
v.ThemeColor = e.ThemeColor;
}
}
else
{//eğer EbentID değeri 0 dan büyük değilse bu yeni kayıt olduğu anlamına gelir
//ve doğrudan tabloma eklerim
dc.Tbl_Events.Add(e);
}
dc.SaveChanges();//yapılan değişimin veritabanına yanstılması için
status = true;//işlem başarıyla tamamlandığı için status değişkeni true ile set edilir.
}
return new JsonResult { Data = new { status=status } };//status değişkenini view'e gönderirim
}
Plan Silme Methodu
[HttpPost]//httpost diyerek methodun kayıt işi yapacağını belirtiyoruz.
public JsonResult DeleteEvent(int EventID) //Sonucu yine Json döndürüyoruz
{
//method parametre olarak silinecek olan planın id değerini alıyor
var status = false;
using (DBCalendarEntities dc = new DBCalendarEntities())//Yine bir örnek alıyorum model'ımdan
{
//id değerini kullanarak silinecek olan planı veritabında arayıp buluyorum.
var v=dc.Tbl_Events.Where(a => a.EventID == EventID).FirstOrDefault();
if (v != null)//bulunan değer null değilse
{
dc.Tbl_Events.Remove(v);//veritabanından kaldırıyorum
dc.SaveChanges();//yapılan değişimin veritabanına yanstılması için
status = true;//işlem başarıyla tamamlandığı için status değişkeni true ile set edilir.
}
}
return new JsonResult { Data=new { status = status } };//status değişkenini view'e gönderirim
}
Controller’da method tanımlamalarımız ardından Index View’imizi açıyoruz. Öncelikle sayfamıza FullCalendar için gereken css ve js uzantılı dosyaların linkini vermekle işe başlıyoruz.
Server tarafındaki verileri client tarafında kullanmamız ve göstermemiz için gereken javascript kodları aşağıdaki gibidir.
$(document).ready(function () { //Tüm Dom ağacı yüklendikten sonra çalışmaya başlanacak olan kodlar
var events = [];//planlarımı ekleyeceğim bir array oluşturuyorum
var selectedEvent = null;// tıkladığım planı tutacak olan değişken
PlanGetirYukleCalendar();//Devamlı bir yenilemeye ihtiyaç duyulacağı için fonksiyon yazıldı
function PlanGetirYukleCalendar() {
events = []; //yine planları tutacak bir arrayimiz var
$.ajax({ //planlarımız server taradından geleceği için ajax'tan yardım alıyoruz'
type: "GET", //çağtılan methodumuzun ne iş yaptığı
url: "/home/GetEvents",//controller/method
success: function (data) {//server çağrısı başarılı olursa
$.each(data, function (i, v) {
events.push({//arrayime sırasıyla çektiğim verileri atıyorum niteliklerine uygun olarak
eventID: v.EventID,
title: v.Subject,
description: v.Description,
start: moment(v.Start),
end: v.End != null ? moment(v.End) : null,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})
TakvimOlustur(events);//Tüm planların çekimini yaptıktan sorna takvimi oluşturmak için fonksiyonumu çağırıyorum
},
error: function (error) {//server cevabı hatalı olursa alert verdiriyorum.
alert('Hata');
}
})
}
function TakvimOlustur(events) {
$('#calender').fullCalendar('destroy'); //var olan takbimi önce bir yok ediyorum
$('#calender').fullCalendar({
contentHeight: 400,//takvim için yükseklik veriyorum
defaultDate: new Date(),//varsayılan olarak bugünü göster diyorum
timeFormat: 'h(:mm)a',//format belirliyoruz
header: {//başlık kısmında bvulunması istediğim butonlar ve yerleri
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) { //plana tıklanınca olacak olaylar
selectedEvent = calEvent;//tıklanan planı tutuyorum
$('#clndrModal #eventTitle').text(calEvent.title); //ve ilk bilgilendirme modal'ımı çağırıyorum'
var $description = $('
$('#btnEdit').click(function () {
//Düzenleme olayı için gereken modal açılır
openAddEditForm();
})
$('#btnDelete').click(function () {//sil butonuna tıklanınca confirm alert çıkarıyoruz
if (selectedEvent != null && confirm('Emin Misin?')) {
$.ajax({
type: "POST", //ajax ile silinecek olan planın id değerini method'a parametre veriyoruz'
url: '/home/DeleteEvent',//controller/method
data: { 'eventID': selectedEvent.eventID },//seçilen planın id değerini parametre verrim
success: function (data) {
if (data.status) { //controllerdan bize status Verisinin geldiğini hatırlayın
PlanGetirYukleCalendar();
$('#clndrModal').modal('hide');//Silme durumunun ardından bu modalı kapatıyoruz
}
},
error: function () {//status verisi false gelirse
alert('Hata');
}
})
}
})
$('#dtp1,#dtp2').datetimepicker({//Plan oluşumunda kullanılacak olan bootstrap'ın datetimepickerları
format: 'DD/MM/YYYY HH:mm A'
});
$('#chkIsFullDay').change(function () {//tam gün planı ise bitiş zamanına dair bootstrap datetimepicker saklanır
if ($(this).is(':checked')) {
$('#divEndDate').hide();
}
else {
$('#divEndDate').show();
}
});
//düzenleme işlemi için form açıldığında
//açılan formun düzenlenecek olan planın değerleriyle dolu olarak gelmesi için
//Jquery val ile niteliğin değeri alındı ve set edildi form inputlarına
function openAddEditForm() {
if (selectedEvent != null) {
$('#hdEventID').val(selectedEvent.eventID);
$('#txtSubject').val(selectedEvent.title);
$('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A'));
$('#chkIsFullDay').prop("checked", selectedEvent.allDay || false);
$('#chkIsFullDay').change();
$('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : '');
$('#txtDescription').val(selectedEvent.description);
$('#ddThemeColor').val(selectedEvent.color);
}
$('#clndrModal').modal('hide');
$('#clndrModalSave').modal();
}
//Kaydet butonuna basıldığında Form inputlarını kontrol ederim oncelıkle
$('#btnSave').click(function () {
//Doğrulama
if ($('#txtSubject').val().trim() == "") {
alert('Konu Boş Bırakılamaz.');
return;
}
if ($('#txtStart').val().trim() == "") {
alert('Başlangıç Zamanı Boş Bırakılamaz');
return;
}
if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") {
alert('Bitim Zamanı Boş Bırakılamaz');
return;
}
else {
var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
if (startDate > endDate) {
alert('Bitim Zamanı Başlangıç Zamanından Önce Olamaz.');
return;
}
}
//Controller kısmına pass edilecek veri Json formatta toparlanır
var data = {
EventID: $('#hdEventID').val(),
Subject: $('#txtSubject').val().trim(),
Start: $('#txtStart').val().trim(),
End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(),
Description: $('#txtDescription').val(),
ThemeColor: $('#ddThemeColor').val(),
IsFullDay: $('#chkIsFullDay').is(':checked')
}
// Server kısmına data'yı pass etmek için fonksıyonumu çağırırım'
SaveEvent(data);
})
function SaveEvent(data) {
$.ajax({
type: "POST",//ajax ile silinecek olan planın id değerini method'a parametre veriyoruz'
url: '/home/SaveEvent',////controller/method
data: data,//post edilecek data
success: function (data) {
if (data.status) { //controllerdan bize status Verisinin geldiğini hatırlayın
//Takvimi yenile
PlanGetirYukleCalendar();
$('#clndrModalSave').modal('hide');//Katdet modalımızı kapatıyoru<.
}
},
error: function () {
alert('Hata');
}
})
}
})
Beklenen çıktılar şu şekilde olmalıdır
Bu modalın açılabilmesi için plana tıklamak gerektiğini unutmayın.
Yeni bir plan eklemek için, ekleme yapacağımız güne tıklmamamız gerekir.
Diğer bir pluginin kullanım örneğinde görüşmek üzere.
NisanurBulut 