5 Kasım 2015 Perşembe

D3 Js Grup Bar Chart Örneği



Geçtiğimiz haftalarda D3 js hakkında bir giriş yaptıktan sonra küçük bir örnek yapmıştım. Bu yazımda da diğer yazımın devamı niteliğinde değil , direk yaptığım orta düzeyli bir grup bar chart örneğini  sizinle paylaşmak istedim. Bu yaptığım çalışmayı linkteki grouped bar chart grafiğini geliştirerek yaptım.

Linkteki örnekte random data üretip buna göre grafiği oluşturuyor. Burada m ve n değerlerini değiştirdiğimiz zaman x ve y eksenlerindeki değerlerinin ,  bar boyutunun  , grup içerisindeki bar sayısını arttırdığımızda renk dağılımının değiştiğini görebiliriz.

Ben bu örneğin üzerine veriyi Json dan alacak şekilde değiştirdim , sağ üst köşeye legend ekledim ki bu legend değerleri de Json içerisindeki değerlerden dinamik olarak okunmaktadır. Bunun dışında birde tooltip ekledim. Sonuçta aşağıdaki gibi bir grafik elde ettim. Tabloyu test etmek için sekme değişkeninin içeriğini a_c , a_b gibi değiştirmeniz yeterlidir.



Şimdilik bu kadar diğer yazıda görüşmek üzere!

0 yorum:

Yorum Gönder