JAVASCRİPT KÜTÜPHANELERİNİN GÖRSELLEŞTİRME VE GÖRÜNTÜ EFEKTİ İŞLEMLERİNDE KULLANIMI VE JS CHARTS KÜTÜPHANESİ
JavaScript Kütüphanelerinin Görselleştirme ve Görüntü Efekti İşlemlerinde Kullanımı
Merhaba arkadaşlar bu hafta sizlere JavaScript kütüphanelerinin görselleştirme ve görüntü efekti işlemlerinde kullanımınından ve de JScharts kütüphanesininden bahsedeceğim. JavaScript kütüphaneleri ile veri kümelerini, internet tabanlı, oldukça etkileyici görsel temsillere çevirmek mümkündür. Bu işlemler için kullanılan başlıca JavaScript kütüphaneleri: Processing.js ( 2 boyutlu çıktı sağlayan çizim, renk işleme,yazı tipleri gibi pek çok alanda görselleştirme sağlayan kütüphane), Raphael.js (Vektörel grafikler oluşturmayı ve bu grafiklere ölçekleme, döndürme, çizim eğrileri eklemeyi sağlayan kütüphane), ImageFX (Resimlere rengini açma, netleştirme, bulanıklaştırma gibi görüntü efektleri ekleyen kütüphane), Reflection.js (resimler üzerinde yansıma efekti oluşturmayı sağlayan kütüphane) ve JS Charts (temel tipteki pasta, çubuk ve çizgi grafik türlerini oluşturmaya yarayan kütüphane) gibidir.
JS Charts Kütüphanesi
JS Charts Kütüphanesi
JS Charts istemci tabanlı komut dosyası kullanılarak grafikler oluşturmaya yarayan bir JavaScript kütüphanesidir. Bu kütüphane çubuklar (bars), pasta grafikleri (pie charts) ve basit çizgilerle (lines) farklı tiplerde grafikler çizmemize izin verir. Windows için Firefox 1.5 ve üzeri, Chrome 10 ve üzeri, İnternet Explorer 8 ve üzeri, Safari 3.1 ve üzeri, Opera 9 ve üzeri tarafından; Mac için Firefox 1.5 ve üzeri, Chrome 10 ve üzeri, Safari 2 ve üzeri tarafından desteklenmektedir. Kütüphaneyi JSCharts linkinden indirebilirsiniz. Kütüphaneyi kullanabilmek için öncelikle sayfanın <head> bölümüne bu satırı eklememiz gerekiyor:
<script type="text/javascript" src="jscharts.js"></script>
Sonrasında oluşturacağımız grafiğin tutulacağı bir içerici (container) hazırlamalıyız. Bu işlemi basitçe, benzersiz (unique) bir id özelliğine sahip <div> etiketiyle yapabiliriz :<div id="container"></div>
Şimdi bir ASP.NET sayfası üzerinden JSChart kütüphanesinin nasıl çalıştığını görelim. Kütüphaneyi kullanabilmek için verdiğim linkten indirdikten sonra, ASP.NET sayfamıza şekilde görüldüğü gibi ekliyoruz:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <div id="grafikcontainer"></div> <script type="text/javascript" src="sources/jscharts.js"></script> <script type="text/javascript"> var veriler = new Array([15, 20], [20, 10], [25, 30], [30, 15], [35, 20]); var cizgiGrafik = new JSChart('grafikcontainer', 'line'); cizgiGrafik.setDataArray(veriler); cizgiGrafik.draw();</script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>Örneğimizde önce " <script type="text/javascript" src="sources/jscharts.js"></script> " satırıyla kütüphanemizin bulunduğu dizini göstererek, projemizde bu kütüphaneyi kullanılabilir hale getirdik. Sonrasında " <div id="grafikcontainer"></div> " satırıyla içericimizi oluşturduk. Ardından oluşturduğumuz, veriler iki boyutlu dizisiyle, oluşturacağımız grafiğin x ve y düzlemlerindeki değerlerini girdik. " var cizgiGrafik = new JSChart('grafikcontainer', 'line'); " satırıyla, bir grafik nesnesi oluşturup onun tipinin 'line' yani bir çizgi grafik olmasını ve id özelliği 'grafikcontainer' olan içericinin içerisinde bulunmasını sağladık. setDataArray fonksiyonuyla da bu grafik nesnesinin verilerini belirledik. Grafiğin özelliklerini bu şekilde belirttikten sonra draw methoduyla bu grafiği çizdirdik. Şimdi kodumuzun çıktısını görelim :
Bir örnek de ASP.NET sayfamızda çubuk grafik oluşturmak üzerine yapalım :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <div id="grafikcontainer"></div> <script type="text/javascript" src="sources/jscharts.js"></script> <script type="text/javascript"> var veriler= new Array(['1. Alan', 25], ['2. Alan', 15], ['3. Alan', 30], ['4. Alan', 10], ['5. Alan', 20]); var cubukGrafik = new JSChart('grafikcontainer', 'bar'); cubukGrafik.setDataArray(veriler); cubukGrafik.draw(); </script> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
Görüldüğü gibi farklı JS Charts Kütüphanesi ile farklı tiplerde grafik nesneleri oluşturmak için, "new JSChart('icerici','grafikTipi')" koduyla oluşturduğumuz grafik nesnelerinin grafik tipi parametresine, türünü girmemiz yeterli oluyor. Örnekte çubuk grafik oluşturmak için grafik tipi parametresine 'bar' anahtar kelimesini girdik. Şimdi örneğimizin çıktısını görelim:
Örneğimizi "new JSChart('grafikcontainer','pie') " şeklinde, sadece grafiğin tipini değiştirip 'pie' yaparak çalıştırdığımızda aynı örneği şekildeki gibi pasta grafiği olarak görüntüleyebiliyoruz :
Örneklerimizde çubuk grafik ve pasta grafik alanları için, biz birer renk belirtmediğimiz için alanların renkleri rastgele olarak belirlendi. Yukarıdaki kod örneğimize aşağıda yazdığım kod satırlarını ekleyerek (istediğimiz rengin HTML kodunu renk dizisine ekleyip, grafiği renklendirme kodu) grafik alanlarının renklerini düzenleyebiliyoruz:
Pasta grafik için:
Pasta grafik için:
var renkler= new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');
pastaGrafik.colorizePie(renkler);
Çubuk grafik için:var renkler = new Array('#0f0', '#ff0000', '#00f', '#ff0', '#00ffff');
cizgiGrafik.colorizeBars(renkler);
Diziye eklediğimiz renk kodlarını HTML Renk Kodları linkinden istediğiniz renk ile değiştirip renklerini kendimiz belirleyeceğimiz grafikler oluşturabiliriz. Görüldüğü gibi JS Charts kütüphanesiyle kolayca verileri görselleştirerek grafikler oluşturabiliyoruz. JS Charts kütüphanesiyle ilgili anlatacaklarım bu kadar. Bu hafta sizlere bir başka görselleştirme kütüphanesi olan Google Charts'dan da kısaca bahsedeceğim. Oluşturduğumuz tüm bu grafik örneklerini ve başka türlerdeki grafikleri, kaynak dosyalarımıza herhangi bir kütüphane eklemeden Google Charts ile yapabiliriz. Bunu nasıl gerçekleştirdiğimizi hemen basit bir örnekle görelim. Yine ASP.NET sayfamızın <head> bölümüne geliyoruz ve aşağıda yazdığım kodla bir Google Charts grafiği oluşturuyoruz:
<div id="grafik_alanı"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['1. Alan', 40],
['2. Alan', 10],
['3. Alan', 15],
['4. Alan', 15],
['5. Alan', 20]
]);
var baslık= {'title':'Google Chart',
'width':400,
'height':300};
var grafik= new google.visualization.PieChart(document.getElementById('grafik_alanı'));
grafik.draw(data, baslık);
}
</script>
Örneğimizde Google Charts ile bir pasta grafiği oluşturmayı gördük. JS Charts'ı kullanırken kütüphanenin dizinini girdiğimiz src özelliğini, bu sefer "src="https://www.google.com/jsapi" yaparak Google Charts Kütüphanesi'ni ASP.NET sayfamıza gömmüş oluyoruz. Sonrasında rahatlıkla Google Charts fonksiyonlarını kullanıp, kütüphanenin grafiklerini oluşturabiliyoruz. Örnekte gördüğümüz "google.visualization.PieChart(document.getElementById('grafik_alanı'));" satırıyla yukarıda belirtmiş olduğumuz özelliklerdeki pasta grafiğimizi, grafik_alanı içericisi üzerinde oluşturduk ve "grafik.draw(data, baslık);" satırıyla da bu grafiğimizi sayfaya çizdirdik. Şimdi bu örneğimizin çıktısını görelim:
Görüldüğü gibi Google Charts grafiklerinin görünümüyle, JS Charts grafiklerinin görünümü arasında bazı farklılıklar bulunuyor; grafik alan başlıklarının görünüm yerleri,alanların grafikteki oranlarının görünümü gibi. Ayrıca JS Charts grafiklerini sadece pie, line, bar şeklinde yani pasta,çizgi ve çubuk grafikler olarak görüntüleyebilmemize karşın, Google Charts bu çeşit grafiklerin yanı sıra dağılım grafiği (scatter chart), coğrafi bölgelerin haritalı grafiği (geo chart), halkasal grafik (donut chart) gibi pek çok farklı grafik çeşitlerini de desteklemektedir. Farklı türlerdeki bu grafiklerin görünümleri için Google Charts Grafik Örnekleri linkinden faydalanabilirsiniz. İsteğiniz türdeki bu grafiklerden herhangi birini kullanmak için; "google.visualization.PieChart(document.getElementById('grafik_alanı'));"
satırında grafiğin pasta grafik türünde olmasını sağlayan PieChart isimli fonksiyonun yerine, GeoChart, DonutChart gibi grafik türlerinin orijinal isimlerinden oluşan fonksiyonlarını çağırmamız gerekiyor.
Bu haftalık size bahsedeceklerim bu kadar. Verilerin görselleştirilmesinde pek çok kolaylık sağlayan bu kütüphanelerin kullanımını basitçe anlatmaya çalıştım. İhtiyacınıza göre her ikisi de fonksiyonel olan, Google Charts ve JS Charts kütüphanelerinden istediğinizi kullanabilirsiniz umarım bu yazı sonrasında.
Kaynaklar:
http://www.jscharts.com/free-download
http://www.jscharts.com/
http://www.codeproject.com/Articles/18618/JavaScript-Chart
http://www.w3schools.com/html/html_colors.asp
https://developers.google.com/chart/interactive/docs/gallery?hl=tr
https://developers.google.com/chart/?hl=tr
Hiç yorum yok:
Yorum Gönder