Merhaba,
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.
ChartJs kullanımı için gereken Script ve Css dosyalarına dair linkleri vermeyi unutmayalım.
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
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. 🙂
Nisanur Bulut
Kaynakça:
http://www.chartjs.org/docs/latest/getting-started/usage.html
NisanurBulut 