Grafiklere Başlarken

Bu sayfada, grafik oluşturmak için Chart API'yi kullanmayla ilgili temel bilgiler verilmektedir.

Google Grafik Kullanım Politikası

Google Chart API'ye günlük olarak yapabileceğiniz çağrı sayısıyla ilgili bir sınır yoktur. Bununla birlikte, kötüye kullanım olduğunu düşündüğümüz kullanımı engelleme hakkını saklı tutarız.

Genel bakış

Bu Belgelerdeki Grafikleri Görüntüleme

Bu belgedeki tüm grafik görüntüleri, Chart API kullanılarak canlı olarak oluşturulur. Herhangi bir resmin URL'sini görüntülemek için şunları yapın:

  • Firefox kullanıyorsanız, sağ tıklayın ve "Resmi Görüntüle"yi veya "Özellikler"i seçin.
  • Internet Explorer kullanıyorsanız sağ tıklayın ve "Özellikler"i seçin.

Bir URL'nin okunmasını kolaylaştırmak için bu doküman genellikle birden çok satırda gösterilir. Google Grafik API'sını kullanırken tek bir satırda bir URL sağlamanız gerekir.

Google Chart API, URL GET veya POST isteğine yanıt olarak bir grafik resmi döndürür. API, pasta veya çizgi grafiklerden QR kodları ve formüllere kadar birçok farklı grafik oluşturabilir. Grafikle ilgili istediğiniz grafik verileri, boyut, renkler ve etiketler gibi tüm bilgiler URL'nin bir parçasıdır. (POST istekleri için bu biraz farklı olur ama şimdi endişelenmeyin).

En basit grafiği oluşturmak için URL'nizin belirtmesi gereken tek şey grafik türü, veri ve boyuttur. Bu URL'yi doğrudan tarayıcınıza yazabilir veya web sayfanızda bir <img> etiketiyle işaret edebilirsiniz. Örneğin, pasta grafik için şu bağlantıyı izleyin:

https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World

 

Yukarıdaki bağlantı, temel Chart API URL'sine örnektir. Tüm Grafik URL'leri aşağıdaki biçimdedir:

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...

Tüm URL'ler https://chart.googleapis.com/chart? ile başlar ve ardından grafik verilerini ve görünümü belirten parametreler gelir. Parametreler, bir "ve" karakteri (&) ile ayrılmış ad=değer çiftleridir. ? karakterinden sonra herhangi bir sırada olabilirler. Tüm grafiklerde en az şu parametreler gerekir: cht (grafik türü), chd (veriler) ve chs (grafik boyutu). Bununla birlikte, ek seçenekler için daha birçok parametre vardır ve grafiğin desteklediği kadar ek parametre belirtebilirsiniz.

Yukarıdaki URL'yi daha ayrıntılı bir şekilde inceleyelim:

URL Bileşenler

Sarı pasta grafik

https://chart.googleapis.com/chart?
  cht=p3&
  chs=250x100&
  chd=t:60,40&
  chl=Hello|World
https://chart.googleapis.com/chart?
Bu, tüm grafik istekleri için temel URL'dir.
cht=p3
Grafik türü: burada 3D pasta grafik.
chs=250x100
Piksel cinsinden grafik boyutu (genişlik x yükseklik). Maksimum değerleri burada bulabilirsiniz.
chd=t:60,40
Grafik verileri. Bu veriler basit metin biçimindedir ancak başka biçimler de vardır.
chl=Hello|World
Dilim etiketleri.
&
Parametreler "ve" işaretiyle ayrılır. Not: HTML'ye bir URL yerleştirirken (ör. bir <img> etiketinin src özelliği olarak) parametreler arasındaki & işaretini &amp; karakterleriyle değiştirmeniz gerekir. Buna, PHP veya başka bir dille sayfa HTML'si oluştururken de izin verilir. Ancak tarayıcıda bir URL yazarken veya kodda bir URL'yi çağrılarken (örneğin, PHP veya Perl'de URL getirirken
) & işaretini kullanmanız gerekir.

Bu URL'yi kopyalayıp tarayıcınıza yapıştırın ve birkaç değişiklik yapmayı deneyin: Verilere ek değerler ekleyin (her yeni veri değerinden önce virgül eklemeyi unutmayın). Yeni etiketler ekleyin (her yeni değerin önüne | işareti koyun). Grafiği büyütün.

Başa dön

Grafik Oluşturma

Resim grafiği şu şekilde oluşturabilirsiniz:

  1. Bir grafik türü seçin. Grafik listesi için galeriye bakın. Grafik türü, cht parametresiyle belirlenir. Grafiğinizin sahip olmasını istediğiniz tüm bileşenleri (eksenler, etiketler, arka planlar vb.) çizin ve gerekirse çeşitli bileşenler için piksel boyutlarını (toplam grafik boyutu, açıklama boyutu vb.) belirleyin. Öncelikle grafik türünüzle ilgili dokümanları dikkatlice okumanız gerekir. Aksi takdirde can sıkıcı bir deneyim yaşayabilirsiniz.
  2. Grafik verilerinizi oluşturun ve biçimlendirin. Veriler, chd parametresi kullanılarak belirtilir. Yapmanız gerekenler, verileriniz için hangi biçimi kullanacağınıza karar vermelidir:
    • Bir veri biçimi seçin. Grafik verileriniz için, kolay okunan ancak göndermek için daha fazla yer kaplayan basit metin biçimi kullanabilirsiniz. Alternatif olarak, gönderme işlemi daha küçük olan ancak gönderebileceğiniz değer aralığını kısıtlayan kodlama türlerinden birini kullanabilirsiniz.
    • Verilerinizin grafiğinize uyacak şekilde ölçeklendirilmesi gerekip gerekmediğine karar verin. Farklı biçimler farklı değer aralıklarını destekler. Farklılıkları daha belirgin hale getirmek için verilerinizi biçiminizin izin verdiği tüm değer aralığını kapsayacak şekilde ölçeklendirmek isteyebilirsiniz. Bunu yapmak için verilerinizi kullandığınız veri biçimine sığacak şekilde ölçeklendirebilir veya özel ölçeklendirmeli metin biçimlendirmesini kullanabilirsiniz.
    • Gerekirse verilerinizi kodlayın. Kodlanmış bir biçim seçtiyseniz diğer kodlama türlerinde yardımcı olmak üzere bazı JavaScript seçenekleri sunuyoruz.
  3. Grafik boyutunu belirtin. Grafik boyutu, chs parametresi kullanılarak belirlenir. Biçim ve maksimum değerler için belgelere göz atın.
  4. Ek parametreler ekleyin. Kullanılabilir isteğe bağlı parametreler, her grafiğin dokümanlarında listelenmiştir. Tipik seçenekler arasında etiketler, başlıklar ve renkler bulunur. Tüm etiket ve başlık metinlerinin UTF-8 olarak kodlanmış olması gerektiğini unutmayın. Birçok parametrenin birden fazla değer girmenize izin verdiğini unutmayın. Örneğin, chm parametresi, bir grafikteki tek bir veri noktasına şekil koymanıza olanak tanır. chm parametresini kullanarak birden fazla veri noktasına şekil yerleştirebilirsiniz ancak bunu yapmak için chm parametresini URL'nizde birden çok kez belirtmeyin (örneğin, YANLIŞ: chm=square&chm=circle&chm=triangle). Bunun yerine, birden çok değer alan parametreler, aynı parametredeki birden fazla değer arasında bir ayırıcı (ör. virgül veya dikey çubuk) kullanır. chm söz konusu olduğunda çubuk bir karakterdir. Bu nedenle şöyle bir ifadeniz olur: RIGHT: chm=square|circle|triangle. Birden fazla parametreyi nasıl belirteceğinizi öğrenmek için her bir parametrenin ayrıntılarına bakın.
  5. URL dizenizi oluşturun. URL, https://chart.googleapis.com/chart? ile başlar, ardından tüm gerekli (cht, chd, chs) ve isteğe bağlı parametreleriniz gelir. Not: URL'nizi bir <img> etiketinde kullanıyorsanız bağlantınızdaki tüm & karakterlerini &amp; olarak değiştirmeniz gerekir. Örnek: <img src="https://chart.googleapis.com/chart?chs=250x100&amp;chd=t:60,40&amp;cht=p3&amp;chl=Hello|World" />.
  6. Resminizi almak için GET veya POST işlevini kullanın. GET, URL'yi doğrudan tarayıcınıza yazdığınızda veya bir <img> etiketinde kullandığınızda gerçekleşir. Bununla birlikte, URL'lerin uzunluğu 2.000 ile sınırlıdır. Bu nedenle bundan daha fazla veriniz varsa veya kan tercihiniz varsa burada açıklandığı şekilde POST yerine POST kullanmayı düşünmelisiniz.
  7. Tıklanabilir bölgeler oluşturun. İsteğe bağlı olarak, grafik için belirli grafik öğelerine köprüler veya tıklama öğeleri eklemenize olanak tanıyan bir resim haritası oluşturabilirsiniz. Ayrıntılar için Grafik Resmi Haritası Oluşturma konusuna bakın.

Başa dön

Grafik Terimleri Sözlüğü

Bu dokümanlarda kullandığımız birkaç önemli terimi aşağıda görebilirsiniz:

Diziler
Grafikte gösterilen alakalı bir veri kümesidir. Seriyi oluşturan öğeler grafik türüne bağlıdır: Çizgi grafikte seri tek bir satırdır; pasta grafikte her giriş bir dilimdir ve tüm dilimlerin toplamı bir seridir. Çubuk grafikte seri, aynı veri kümesinden alınan tüm çubuklardır. Farklı seriler, çubuk grafik türüne bağlı olarak yan yana gruplanır veya üst üste yığılır. Aşağıdaki grafikte, biri koyu mavi, diğeri açık mavi olmak üzere iki seriden oluşan gruplandırılmış bir çubuk grafik gösterilmektedir:
Kediler ve Köpekler adlı iki serinin gösterildiği çubuk grafik.
Eksen etiketleri
Her eksendeki sayısal veya metin değerleri. Önceki grafikte "Oca", "Şub", "Mart", "0", "50", "100" etiketleri yer alıyordu.

Grafik Bileşenleri

Grafik bileşenlerinden bazıları şunlardır:

Grafiğin çeşitli bölgeleri.
Grafik alanı
Dizi resminin gösterildiği alan. Daha fazla ayrıntı için "Grafik Bileşenleri" kenar çubuğuna bakın.
Açıklama
Grafikte seriyi açıklayan küçük bir alan. Yukarıdaki grafikte "Kediler" ve "Köpekler" öğelerinin listelendiği bölümdür.
Parametre
URL'de kullanılan bir anahtar=değer çifti. Örneğin, chxt=x parametresinde chxt parametre adı, x ise parametre değeridir.
GET ve GET
Grafik URL'nizi göndermenin iki yöntemi vardır. GET genellikle tarayıcıya bir URL yazarak veya bunu bir <img> etiketinin kaynağı yapılarak yapılır. POST isteklerinin oluşturulması daha karmaşıktır ancak çok daha fazla veri içerebilir. GET yerine POST kullanılmasının başlıca nedeni, POST isteğinin GET isteğinden çok daha fazla veri alabilmesidir (16.000 karakter 2.000 karaktere karşılık). POST ile ilgili konu burada bulunmaktadır.
Pipe karakteri
Genellikle parametre değeri ayırıcı olarak kullanılan | karakteri, yani birden fazla değeri bölmek için kullanılan bir karakterdir. Virgül ve "ve" işaretleri (&) de Grafik URL'sinde ayırıcı olarak kullanılır.
Bileşik grafikler
İki farklı grafik türünün kombinasyonu olan grafik: ör. çizgi içeren çubuk grafik veya şamdan işaretçili çizgi grafik. Bileşik Grafikler bölümüne bakın.

Başa dön

Grafik oluşturmanın temellerini öğrendiğinize göre artık kullanabileceğiniz birkaç optimizasyondan yararlanabilirsiniz.

POST kullanma

URL'lerin uzunluğu 2K ile sınırlıdır. Bu nedenle grafiğinizde daha fazla veri varsa burada açıklandığı gibi GET yerine POST kullanmanız gerekir. GET, grafik URL'nizi tarayıcınızın URL çubuğuna yazmanız veya bir web sayfasında <img> öğesinin kaynağı olarak kullanmanızdır. POST için PHP veya PERL gibi başka bir dilde ek programlama gerekir.

JavaScript'te Grafik Oluşturma

Sizin için görsel grafikler oluşturmak üzere Google Görselleştirme API'sini kullanabilirsiniz. Google Görselleştirme API'si, verileri oluşturmak, filtrelemek ve değiştirmek ya da Google E-Tablolar'ı veya diğer siteleri veri almak için sorgulamak için kullanabileceğiniz araçlar sunan JavaScript tabanlı bir API'dir. Verilerinizi oluşturmak için Görselleştirme API'sini kullanabilir, ardından sayfadaki grafiği oluşturmak için Image Charts API'yi çağırmasını sağlayabilirsiniz. Daha fazla bilgi için Genel Resim Grafiği dokümanlarına veya işaretli herhangi bir Google grafiği (Resim) için Görselleştirme galerisine bakın.