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.