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 |
---|---|
|
& 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.
Grafik Oluşturma
Resim grafiği şu şekilde oluşturabilirsiniz:
- 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. - 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.
- Grafik boyutunu belirtin. Grafik boyutu,
chs
parametresi kullanılarak belirlenir. Biçim ve maksimum değerler için belgelere göz atın. - 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çinchm
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. - 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&
olarak değiştirmeniz gerekir. Örnek:<img src="https://chart.googleapis.com/chart?chs=250x100&chd=t:60,40&cht=p3&chl=Hello|World" />
. - 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. - 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.
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:
- 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:
- 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
parametresindechxt
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.
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.