Web’de grafiksel gösterimin zengin hali: Highcharts

Standart
Bilgiyi paylaşarak çoğalt !Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Facebook0Pin on Pinterest0

Highchart, web sitelerine ve ya web uygulamalarına kolay olarak eklenebilen etkileşimli(interaktif), saf javaScript ile yazılmış grafikkütüphanesidir. Highchart şu anda:

  • line,
  • spline,
  • area,
  • areaspline,
  • column,
  • bar,
  • pie,
  • scatter,
  • angular gauges,
  • arearange,
  • areasplinerange,
  • columnrange,
  • bubble,
  • box plot,
  • error bars,
  • funnel,
  • waterfall
  • polar

grafik tiplerini destekliyor. Genel olarak özelliklerinden de bahsedecek olursak:

  • Highchart uyumludur. Bütün mobil ve masaüstü tarayıcılarında (iPhone/iPad ve Internet Exploerer 6 dan sonra) çalışıyor. iOs ve Andorid de çoklu dokunmayı desteklediği için kesintisiz bir kullanıcı deneyimi sunuyor. Standart tarayıcılar grafikleri oluştururken SVG kullanıyor ve Internet Explorer da ise garfikler VML kullanılarak çizdiriliyor.
  • Highchart ticari olmayan kullanım için ücretsizdir. Herhangi bir lisans altında, ücretsiz ya da değil, kaynak kodu indirebilir ve kendi değişikliklerimizi yapabiliriz. Bu kişisel değişiklikler yapmamızı ve büyük bir esneklik sağlıyor bize.
  • Sadece native tarayıcı teknolojilerine dayalıdır ve client tarafı Flash ve ya Java gibi eklentilere ihtiyaç duymaz. Ayrıca server’a herhangi birşey indirmeye gerek yoktur. Php yok ASP.NET yok. Sadece çalışmak için iki tane javascript dosyasına ihtiyacı var: highcharts.js ve jQuery, MooTools ve ya Prototype frameworkü. Bu frameworklerden biri zaten web sayfanızda kullanılmaktadır.
  • Highcharts’ın yapılandırma ayarları için özel bir programlama yeteneğine ihtiyaç duyulmaz. Ayarlamalar javascript obje notasyonunda ki yapı ile verilir. Tam API boyunca grafiği oluşturduktan sonra herhangi bir zamanda ekleme,çıkarma serileri ve noktaları ve ya eksenleri değiştirebilirsiniz.
  • Sayısal olayları programlamaya göre daha iyi destekliyor.
  • jQuery, MooTools ve ya Ajax’ın Prototype API’si ile, canlı grafikler oluşturup bu grafikteki sabitleri server, kullanıcı dataları ve daha fazlası ile güncellemeyi sağlayabilirsiniz.
  • Bazen kullanıcılar sıcaklık, yağış miktarı ve hava basıncı gibi aynı türde olmayan değişkenleri karşılaştırmak isterler. Highcharts eksenlere birden fazla tür eklememize izin veriyor. Her eksen sağa, sola, yukarıya ve ya aşağıya yerleştirilebilir.  Bütün ayarlar ayrı ayrı ayarlanabilir.
  • Mouse ile Highchart grafiğinin üzerine gelindiğinde bir tooltip(ipucu) denen, her nokta ve seri bilgilerini içeren bir metin kutucuğu gösterir.
  • Gösterilecek veriler çok sık bir şekilde ise yakınlaştırma(zoom) özelliği ile seçilen bölgeye x, y veya her iki eksende de yakınlaşır. Bunun için fazladan iki kelimelik kod yazmanız yeterlidir.
  • Exporting modülü aktif edilmesiyle kullanıcılar, grafiği PNG, JPG, PDF ve ya SVG formatında bir buton yardımıyla indirebilir ve ya direk olarak yazdırabilirler.

Highchartsın özellikleri saymakla bitmeyeceği için ufak bir örnek ile nasıl kullanıldığına değineyim. Bunun için JSFIDDLE’ı kullanacağım.

Siteyi açtığınızda karışınıza gelen boş sayfada HTML taglerinin yer aldığı boş alana aşağıdaki kodları yazalım:

Burada Highcharts’da kullanmak istediğimiz highcharts.js kütüphanesini ve kullanıcıya oluşturulan grafiğin farklı formatlar da indirilmesine olanak sağlayan exporting.js modülünü belirttik. Hemen altında ise oluşacak grafiğin “container” adlı bir divin içinde olacağını söyledik.

CSS taglerinin bulunduğu kısma herhangi birşey yazmayacağım çünkü sade olarak grafiğin gösterilmesini istiyorum. İstenirse bu alana css özellikleri eklenebilir.

JavaScript tagli alana ise aşağıdaki kodu yazalım:

Şimdi sırayla neler yapıldığına bakalım:

  • title tagi ile grafiğe bir başlık atandı
  • subtitle ile de başlığın altına bilgilendirici bir yazı koyuldu
  • xAxis ile yatay eksen için göstermek istediğimiz bilgileri (burada aylar) category objesi ile belirtildi
  • yAxis ile dikey eksen için bir isim belirlendi
  • legend objesi bize gösterilen değerlerde hangi rengin hangi serinin olduğunu gösterildi
  • series içerisinde de göstermek istediğimiz verilerin hangi başlık altında gösterileceğini ve değerlerinin ne olacağını bildirildi

Bütün bunlardan sonra üst panelde bulunan Run butonuna tıklandıktan sonra grafiğin, sağ alt köşede bulunan Result alanında görüntülendiğini göreceksiniz.

qwe2

Eğer fare ile serilerin üzerinde gezerseniz o aya ait o ilin sıcaklık durumunu gösteren bir ipucu belirecektir. Ayrıca sağ üst köşede bulunan buton (üst üste üç çizgi olan) ile oluşan grafiği kayıt edebiliriz.

qwe1

Görüldüğü üzere Highcharts’ı kullanarak ücretsiz bir şekilde web sitelerinde anlamlandırılmış verilerle oluşturulmuş, kullanıcıyı anlam karmaşıklığından uzaklaştırıp, sadelik ve anlaşılırlık ile buluşturan grafikler çizdirebiliriz.

Leave a Reply