Thursday, March 11, 2010

Google Visualization Api - Interactive charts ve UTF-8 Karakter Sorunu

Visualization Api içinde "Interactive charts" son derece pratik ve gelişmiş bir şekilde grafik sunum ihtiyaçlarınızı karşılıyor. "Image Charts" için herhangi bir js kütüphanesi yüklemenize gerek olmazken bunda Google jsapi ile Visualization Api yi yükletiyorsunuz sayfanıza. Detay : http://code.google.com/apis/visualization/documentation/using_overview.html

Ben de harita üzerinden ağırlık dağılımını göstermek için kullandım şu şekilde

<script type="text/javascript" charset="utf-8" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" charset="utf-8">
    google.load('visualization', '1', {
        'packages': ['geomap']
    });
    var temp = 0;
    google.setOnLoadCallback(drawMap);


    function drawMap() {

        var data = new google.visualization.DataTable();
        data.addRows(81);
        data.addColumn('string', 'City');
        data.addColumn('number', 'Kelime Sayisi');

// ...
        data.setValue(4, 0, 'İstanbul');
        data.setValue(4, 1, 57);

        data.setValue(5, 0, 'Ankara');
        data.setValue(5, 1, 42);
// ...

var options = {};
   options['region'] = 'TR';
   options['colors'] = [0xA493FF, 0x4C51CD, 0x00065E]; // colors
   options['dataMode'] = 'regions';
   options['width'] = '540px';
   options['height'] = '348px';
 
   var container = document.getElementById('map_canvas');
   var geomap = new google.visualization.GeoMap(container); 
  
   var ikinci_sehir="";
   var ilk_sehir="";
   
  google.visualization.events.addListener(geomap, 'regionClick', function(e) {   
   sehir=e['region']; // tıklanan sehri su sekilde getirir : TR-06   : TR-PLAKA  
 });
 
 geomap.draw(data, options);
 
    };


Çok da güzel oldu aslında.



Fakat tek sorun Türkçe karakterlerde.
Tam şurada şehir adlarını eklediğim yerde :
  
        data.setValue(4, 0, 'İstanbul');
        data.setValue(4, 1, 57);
        data.setValue(5, 0, 'Ankara');
        data.setValue(5, 1, 42);

Bu grafiğin aynısı google analytics'de de var ve fakat orada Türkçe karakter sorunu yok. Yani çözümsüz bir şey değil fakat henüz çözüm bulamadım.

Mesela neler yaptığımı da yazayım, "şunu yap bunu yap öyle dene" demeyin yani :

1. Sayfanın karakter kodlaması gerçekten de UTF-8 mi diye kontrol ettim
2. header ('Content-type: text/html; charset=utf-8'); yaptım üstüne bir de
3. javascript tagına charset="utf-8" ekledim
4. google jsapi'ye karakter kodlaması parametresini utf-8 verdim bir d eöyle yüklettim
5. Gelen şehir isimleri "string" değerlerimi veritabanından doğrumu çekiyorum
6. iconv ile utf-8 gelen şehir adlarını bir de iso formatına çevirdim.
7. 6 dakininin tam tersini yaptım
8. bıktım usandm bıraktım
9. google araması yaptım
10. uykum geldi bu yazıyı yazdım


Çözüm bulur bulmaz yazacağım buraya. Fakat lurda okuyan bir bilinçli internet kullanıcısı çözümü biliyorsa yorum olarak yazsa ne güzel olur?

No comments: