9 Haziran 2016 Perşembe

mihenk.js Uygulamaları 1



Bundan önceki yazımda Mikenk in ne olduğundan bahsetmiştim. Bu yazımın temel konusu ise mihenk.js i kendi projemize nasıl dahil ederiz ve grafikleri nasıl kullanabiliriz olacak. Öncelikle geliştirmekte olduğum açık kaynak mihenk.js projesine aşağıdaki linkten erişebilirsiniz;

guvenir.github.io/Mihenk/

Kodları indirmek için ;

https://github.com/Guvenir/mihenkjs

Javascript ve css kodlarımızı indirdikten sonra html sayfamıza önce d3.js linkini sonra da mihenk.css ve mihenk.js yi ekleyelim. Aşağıdaki gibi ;


Grafiğin png çıktısını alabilmek için saveSvgAsPng yi de indirip koda eklememiz gerekiyor.  Sonrasında da html içerisine grafiğin çizdirileceği div i tanımlıyoruz. Bu div içerisini de boş bir svg tag ı açıp kapatıyoruz.

Html tarafı hazır olduğuna göre artık Javascript tarafında verimizi uygun formatta hazırlayıp grafiğimizi çizdirebiliriz.

Veri formatını inceleyecek olursak xdata  x ekseni için gerekli değerler , ydata y ekseni için gerekli verilerdir. Opt ise grafikle ilgili değişiklik yapabileceğimiz yerdir. x_labels ve y_label ilgili eksenler için farklı şekilde label eklemek istiyrosak (örneğin x ekseninde grafik oluşturulurken sayısal veri girildi ancak ben orada tarih yazmasını istiyorsam x_labels dizisi içerisine tek tek x verisine karşılık gelecek tarih bilgilerini ekleyebilirim) bu diziler sayesinde kolayca ekleyebiliriz.

Oluşturulan grafiklere hem çift tıklayarak hem de farenin tekerini çevirerek yakınlaşabilir , sürükleyerek grafiğin konumunu değiştirebiliriz. Bunu yapabilmemiz için ise opt içerisindeki zoom özelliği true olmalı ve x_label , y_labels içerisinde etiket olmamalıdır. Bunun sebebi ise x ve y eksenleri için sayısal veri girildiğinde grafiğe yakınlaştığımızda değerleri kendisi hesaplayabilir ancak etiket koyarsak yakınlaşma durumunda yeni etiket bilgilerini kendisi ekleyemeyeceği için grafik bozuluyor. Bundan dolayı zoom özelliği true olsa bile x veya y ekseni için ya da her ikisi için etiket belirlenmişse zoom özelliği devre dışı kalıyor.

xlab ve ylab ise grafik eksenlerinin adlandırılması için kullanılmaktadır. Örneğin hız/zaman grafiği için ylab hız , xlab zaman şeklinde düzenleyebiliriz.

color bir dizidir ve içerisine eklediğimiz renkleri sırası ile grafikte kullanır. "#456" şeklinde renk kodlarımızı ekleyebiliriz. Örneğin ["#987","#123456"] renklerini eklediğimiz zaman grafikte diyelim ki 6 adet bar var  ise sırası ile renklendirir ve 3 adet ilk renk için 3 adette ikinci renk için bar olur. Bir nevi gruplandırma yapmış oluruz.

div_id içerisine ise html tarafında oluşturduğumuz ve grafiğin çizileceği div in id sini yazıyoruz. Doğru yazmadığımız zaman grafik çizilmeyecektir.

mihenk.barchart(mihenkdata);

Veriyi uygun formatta hazırladıktan sonra yukarıdaki gibi çağırmamız yeterli olacaktır.


Şimdilik bu kadar , eğer bir sorunuz olursa bana ulaşabilir veya yorum bırakabilirsiniz.

0 yorum:

Yorum Gönder