Takip et

Google Chart Grafiklerini Responsive Yapalım

Merhaba değerli blog ziyaretçilerim. Web tabanlı online raporlama araçlarından (kütüphane de diyebiliriz) googleChart developerların büyük yardımcısı.

Uzun zamandır da projelerde kullanırım, şimdiye kadar google yüzümü kara çıkartmadı desem yeridir. Fakat google uzun zamandır grafiklerini responsive hale getirmedi malesef. Bunun için ufak bir çalışma gerekiyor. Bu yazımda sizlerle bu sorunu nasıl çözdüğümüzü göreceğiz.

Bilmeyenler için, Google Charts, web sitenize entegre edebileceğiniz bir grafik görselleştirme aracı, etkileşimli grafikler ve veri araçları galerisi. Kısacası verilerinizi php, json aracılığıyla googleChart’a veriyorsunuz, o da sizin verileriniz için güzel grafikler oluşturuyor.

Google Chart Grafik Örnekleri - Resim 1
Google Chart Grafik Örnekleri – Resim 1

Sorun: Google Chart grafikleri ekstra herhangi bir çalışma yapıladığı taktirde responsive sistemlerin içerisinde veya dışında responsive şekilde çalışmıyor.

Çözüm: Beklendiği gibi responsive çalışması için küçük bir jquery kodu eklemeniz gerekecek. (Aşağıdaki gibi)

$(window).resize(function(){
	  	drawChart1();
	  	drawChart2();
});

Demo görünümü için buraya uğrayabilirsiniz.

Yorumlar
İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.
Yorum Yaz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

E-posta Bülteni
Yazılım Topluluğuna Katılın
En son güncellemeleri, yaratıcı ipuçlarını ve özel kaynakları doğrudan e-posta kutunuza alın. Tasarım ve inovasyonun geleceğini birlikte keşfedelim.