Google Görselleştirme API'sı Referansı

Bu sayfada, Google Görselleştirme API'si tarafından sergilenen nesneler ve tüm görselleştirmeler tarafından gösterilen standart yöntemler listelenmiştir.

Not: Google Görselleştirme API'sı ad alanı google.visualization.* şeklindedir

1. DataTable Sınıfı
2. DataView Sınıfı
3. ChartWrapper Sınıfı
4. ChartEditor Sınıfı
5. Veri Manipülasyon Yöntemleri
   1. group()
   2. join()
6. Biçimlendiriciler
   1. ArrowFormat
   2. BarFormat
   3. ColorFormat
   4. DateFormat
   5. NumberFormat
   6. PatternFormat
7. BloggerHelper Sınıfı
8. Sorgu Sınıfları
   1. Sorgu
   2. QueryResponse
9. Hata Görüntüleme Sınıfı
10. Etkinlikler
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners()
    5. google.visualization.events.trigger()
11. Standart Görselleştirme Yöntemleri ve Özellikleri
    1. Oluşturucu
    2. draw()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. setSelection()
12. Çeşitli Statik Yöntemler
    1. arrayToDataTable()
    2. drawChart()
    3. drawToolbar()

Dizilerle İlgili Not

Bazı tarayıcılar, JavaScript dizilerinde sondaki virgülleri doğru şekilde işlemediğinden bunları kullanmayın. Bir dizinin ortasında boş değerler bulunması sorun yaratmaz. Örneğin:

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

DataTable Sınıfı

İki boyutlu ve değişebilir bir değer tablosunu gösterir. DataTable öğesinin salt okunur kopyasını oluşturmak için (isteğe bağlı olarak belirli değerleri, satırları veya sütunları gösterecek şekilde filtrelenir) DataView oluşturun.

Her sütuna bir veri türünün yanı sıra kimlik, etiket ve kalıp dizesi dahil olmak üzere isteğe bağlı özellikler atanır.

Ayrıca herhangi bir hücreye, satıra, sütuna veya tablonun tamamına özel özellikler (ad/değer çiftleri) atayabilirsiniz. Bazı görselleştirmeler belirli özel özellikleri destekler. Örneğin, Tablo görselleştirme, oluşturulan tablo hücresine satır içi CSS stili dizesi atamanıza olanak tanıyan "style" adlı bir hücre özelliğini destekler. Görselleştirme, desteklediği özel özellikleri belgelerinde açıklamalıdır.

Ayrıca bkz: QueryResponse.getDataTable

Oluşturucu

Söz dizimi

DataTable(opt_data, opt_version)

opt_data

[İsteğe bağlı] Tabloyu başlatmak için kullanılan veriler. Bu, doldurulmuş bir tabloda DataTable.toJSON() çağrısı yapıldığında döndürülen JSON veya tabloyu başlatmak için kullanılan verileri içeren bir JavaScript nesnesi olabilir. JavaScript düz nesnesinin yapısı burada açıklanmıştır. Bu parametre sağlanmazsa yeni ve boş bir veri tablosu döndürülür.

opt_version

[İsteğe bağlı] Kullanılan kablo protokolünün sürümünü belirten sayısal bir değerdir. Bu özellik yalnızca Grafik Araçları Veri Kaynağı uygulamaları tarafından kullanılır. Şu anki sürüm 0.6'dır.

Ayrıntılar

DataTable nesnesi, görselleştirmeye iletilen verileri tutmak için kullanılır. DataTable, iki boyutlu temel bir tablodur. Her sütundaki tüm veriler aynı veri türüne sahip olmalıdır. Her sütunun, veri türünü içeren bir tanımlayıcı, bu sütun için bir etiket (görselleştirmeyle gösterilebilir) ve belirli bir sütuna referans vermek için kullanılabilecek bir kimlik (sütun dizinlerini kullanmaya alternatif olarak) bulunur. DataTable nesnesi, belirli bir değere, satıra, sütuna veya DataTable öğesinin tamamına atanmış rastgele özelliklerin haritasını da destekler. Görselleştirmeler, ek özellikleri desteklemek için bunları kullanabilir. Örneğin, Tablo görselleştirme, tek tek hücrelere rastgele sınıf adları veya stiller atayabilmeniz için özel özelliklerden yararlanır.

Tablodaki her hücre bir değer içerir. Hücrelerde null değer veya bulunduğu sütun tarafından belirtilen türde bir değer olabilir. Hücreler isteğe bağlı olarak verilerin "biçimlendirilmiş" sürümünü alabilir. Bu, verilerin bir görselleştirme tarafından gösterilmek üzere biçimlendirilmiş bir dize sürümüdür. Görselleştirmeler, görüntüleme için biçimlendirilmiş sürümü kullanabilir (ancak zorunlu değildir), ancak yaptığı tüm sıralama veya hesaplamalar (örneğin, bir noktanın grafikte nereye yerleştirileceğini belirlemek) için verilerin kendisini her zaman kullanır. Örneğin, 1, 2 ve 3 gibi sayısal hücre değerlerine "düşük" "orta" ve "yüksek" değerleri biçimlendirilmiş değerler olarak atanabilir.

Oluşturucuyu çağırdıktan sonra veri satırları eklemek amacıyla tek bir satır için addRow() veya birden çok satır için addRows() yöntemini çağırabilirsiniz. addColumn() yöntemlerini çağırarak sütunlar da ekleyebilirsiniz. Satır ve sütunlar için de kaldırma yöntemleri vardır ancak satırları veya sütunları kaldırmak yerine, DataTable öğesinin seçici bir görünümü olan bir DataView oluşturabilirsiniz.

DataTable içindeki değerleri, görselleştirmenin draw() yöntemine geçirildikten sonra değiştirirseniz, değişiklikler grafiği hemen değiştirmez. Değişiklikleri yansıtmak için draw() numaralı telefonu tekrar çağırmanız gerekiyor.

Not: Google Charts, veri tablolarında herhangi bir doğrulama yapmaz. (Yayınlanıyorsa grafiklerin oluşturulması daha yavaş olurdu.) Sütununuzun dize beklediği bir sayı (veya tam tersi) sağlarsanız Google Charts, değeri anlamlı bir şekilde yorumlamak için en iyi performansı gösterir ancak hataları işaretlemez.

Örnekler

Aşağıdaki örnekte, yukarıdaki JavaScript örneğinde gösterilenle aynı veriler kullanılarak bir DataTable öğesinin örneklenmesi ve doldurulması gösterilmektedir.

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Aşağıdaki örnek yeni ve boş bir DataTable oluşturur ve daha sonra yukarıdakiyle aynı verilerle manuel olarak doldurur:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

DataTable'ımı JavaScript'te mi yoksa nesne değişmez değer notasyonunda mı oluşturmalıyım?

DataTable oluşturucuyu parametre olmadan çağırarak ve ardından aşağıda listelenen addColumn()/addRows() yöntemlerini çağırarak değerler ekleyerek veya başlamak için doldurulan bir JavaScript düz nesnesini ileterek bir DataTable oluşturabilirsiniz. Her iki yöntem de aşağıda açıklanmıştır. Hangisini kullanmalısınız?

• addColumn(), addRow() ve addRows() kodunu çağırarak JavaScript'te tablo oluşturup doldurmak son derece okunabilir bir koddur. Bu yöntem, kodu elle gireceğiniz zaman kullanışlıdır. Nesne değişmez değer gösterimini (aşağıda açıklanmıştır) kullanmaya göre daha yavaştır ancak daha küçük tablolarda (ör. 1.000 hücre) muhtemelen pek fazla fark görmezsiniz.
• Nesne değişmez değeri gösterimi kullanılarak DataTable nesnesinin doğrudan bildirilmesi büyük tablolarda çok daha hızlıdır. Ancak, doğru söz dizimini almak zor olabilir. Kodda nesne değişmez söz dizimini oluşturabiliyorsanız bunu kullanın, bu da hata olasılığını azaltır.

 

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
addColumn(type, opt_label, opt_id) VEYA addColumn(description_object)	Sayı	Veri tablosuna yeni bir sütun ekler ve yeni sütunun dizinini döndürür. Yeni sütunun tüm hücrelerine null değeri atanır. Bu yöntemin iki imzası vardır: İlk imza aşağıdaki parametrelere sahiptir: type - Sütundaki değerlerin veri türünü içeren bir dize. Tür, şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'. opt_label - [İsteğe bağlı] Sütunun etiketini içeren bir dize. Sütun etiketi genellikle görselleştirmenin bir parçası olarak gösterilir. Örneğin, bir tabloda sütun başlığı veya pasta grafikte gösterge etiketi olarak. Değer belirtilmezse boş bir dize atanır. opt_id - [İsteğe bağlı] Sütun için benzersiz tanımlayıcı içeren bir dize. Herhangi bir değer belirtilmezse boş bir dize atanır. İkinci imzanın, aşağıdaki üyeleri içeren tek bir nesne parametresi vardır: type - Sütun veri türünü açıklayan bir dize. Yukarıdaki type ile aynı değerler. label - [İsteğe bağlı, dize] Sütun için bir etiket. id - [İsteğe bağlı, dize] Sütun için bir kimlik. role - [İsteğe bağlı, dize] Sütun için bir rol. pattern - [İsteğe bağlı, dize] Sütun değerinin nasıl görüntüleneceğini belirten bir sayı (veya tarih) biçimi dizesi. Ayrıca bkz: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole
addRow(opt_cellArray)	Sayı	Veri tablosuna yeni bir satır ekler ve yeni satırın dizinini döndürür. opt_cellArray [isteğe bağlı] Yeni satır için verileri belirten, JavaScript gösteriminde bir satır nesnesi. Bu parametre dahil edilmezse bu yöntem, tablonun sonuna yeni ve boş bir satır ekler. Bu parametre, hücre değerlerinden oluşan bir dizidir: Yalnızca bir hücre için değer belirtmek istiyorsanız hücrenin değerini verin (ör. 55 veya "merhaba"); hücre için biçimlendirilmiş bir değer ve/veya özellikler belirtmek istiyorsanız bir hücre nesnesi kullanın (ör. {v:55, f:'Elli beş'}). Aynı yöntem çağrısında basit değerleri ve hücre nesnelerini karıştırabilirsiniz). Boş bir hücre için null veya boş bir dizi girişi kullanın. Örnekler: data.addRow(); // Add an empty row data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value. // Add a row with two cells, the second with a formatted value. data.addRow(['Hermione', {v: new Date(1999,0,1), f: 'January First, Nineteen ninety-nine'} ]); data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined. data.addRow(['Col1Val', , 'Col3Val']); // Same as previous.
addRows(numOrArray)	Sayı	Veri tablosuna yeni satırlar ekler ve son eklenen satırın dizinini döndürür. Aşağıda açıklandığı gibi yeni boş satırlar oluşturmak veya satırları doldurmak için kullanılan verilerle bu yöntemi çağırabilirsiniz. numOrArray - Bir sayı veya dizi: Sayı: Kaç yeni ve doldurulmamış satırın ekleneceğini belirten sayı. Dizi: Yeni satır grubunu doldurmak için kullanılan row nesneleri dizisi. addRow() bölümünde açıklandığı gibi her satır bir nesnedir. Boş bir hücre için null veya boş bir dizi girişi kullanın. Örnek: data.addRows([ ['Ivan', new Date(1977,2,28)], ['Igor', new Date(1962,7,5)], ['Felix', new Date(1983,11,17)], ['Bob', null] // No date set for Bob. ]); Şu makaleyi de inceleyebilirsiniz: insertRows
clone()	DataTable	Veri tablosunun bir klonunu döndürür. Sonuçta, hücre özellikleri, satır özellikleri, tablo özellikleri ve sütun özellikleri dışında veri tablosunun derin bir kopyası oluşturulur. Bunlar yüzeysel kopyalardır. Bu, primitif olmayan özelliklerin referansla kopyalandığı, ancak temel özelliklerin değere göre kopyalandığı anlamına gelir.
getColumnId(columnIndex)	Dize	Temel tablodaki sütun dizini tarafından belirtilen belirli bir sütunun tanımlayıcısını döndürür. Sorgular tarafından alınan veri tablolarında, sütun tanımlayıcı veri kaynağı tarafından ayarlanır ve sorgu dili kullanılırken sütunlara referans vermek için kullanılabilir. Ayrıca bkz: Query.setQuery
getColumnIndex(columnIdentifier)	Dize, Sayı	Belirli bir sütunun dizini, bu tabloda mevcutsa sütun dizini, kimlik veya etiket tarafından belirtilen dizinini; aksi takdirde -1 değerini döndürür. columnIdentifier bir dizeyse sütunu önce kimliğine, ardından etiketine göre bulmak için kullanılır. Ayrıca bkz: getColumnId, getColumnLabel
getColumnLabel(columnIndex)	Dize	Temel tablodaki sütun dizini tarafından belirtilen belirli bir sütunun etiketini döndürür. Sütun etiketi genellikle görselleştirmenin bir parçası olarak gösterilir. Örneğin, sütun etiketi bir tabloda sütun başlığı veya bir pasta grafikte gösterge etiketi olarak görüntülenebilir. Sorgularla alınan veri tablolarında sütun etiketi, veri kaynağı veya sorgu dilinin label ifadesiyle ayarlanır. Ayrıca bkz: setColumnLabel
getColumnPattern(columnIndex)	Dize	Belirtilen sütunun değerlerini biçimlendirmek için kullanılan biçimlendirme modelini döndürür. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Sorgular tarafından alınan veri tablolarında, sütun kalıbı, veri kaynağı veya sorgu dilinin format ifadesi tarafından ayarlanır. Kalıp örneği: '#,##0.00'. Kalıplar hakkında daha fazla bilgi için sorgu dili referansını inceleyin.
getColumnProperties(columnIndex)	Nesne	Belirtilen sütun için tüm özelliklerin haritasını döndürür. Özellikler nesnesinin referansla döndürüldüğünü, dolayısıyla alınan nesnedeki değerlerin değiştirilmesinin bunları DataTable içinde değiştirdiğini unutmayın. columnIndex, özelliklerinin alınacağı sütunun sayısal dizinidir.
getColumnProperty(columnIndex, name)	Otomatik	Adlandırılmış bir özelliğin değerini veya belirtilen sütun için böyle bir özellik ayarlanmadıysa null değerini döndürür. Dönüş türü mülke bağlı olarak değişiklik gösterir. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. name, dize olarak özellik adıdır. Ayrıca bkz: setColumnProperty setColumnProperties
getColumnRange(columnIndex)	Nesne	Belirtilen bir sütundaki değerlerin minimum ve maksimum değerlerini döndürür. Döndürülen nesne min ve max özelliklerine sahip. Aralıkta değer yoksa min ve max, null değerini içerir. columnIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük bir sayı olmalıdır.
getColumnRole(columnIndex)	Dize	Belirtilen sütunun rolünü döndürür.
getColumnType(columnIndex)	Dize	Sütun dizini tarafından belirtilen belirli bir sütunun türünü döndürür. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Döndürülen sütun türü şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'
getDistinctValues(columnIndex)	Nesne dizisi	Belirli bir sütundaki benzersiz değerleri artan sırada döndürür. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Döndürülen nesnelerin türü, getValue yöntemi tarafından döndürülen nesnelerin türü ile aynıdır.
getFilteredRows(filters)	Nesne dizisi	Verilen filtrelerin tümüyle eşleşen satırların satır dizinlerini döndürür. Dizinler artan düzende döndürülür. Bu yöntemin çıkışı, görselleştirmede görüntülenen satır grubunu değiştirmek için DataView.setRows() için giriş olarak kullanılabilir. filters - Kabul edilebilir hücre değerini açıklayan nesne dizisi. Bu yöntem, belirtilen filtrelerin tamamıyla eşleşirse bir satır dizini döndürülür. Her filtre, değerlendirilecek satırdaki sütunun dizinini belirten sayısal bir column özelliğine ve aşağıdakilerden birini belirten bir nesnedir: Belirtilen sütundaki hücreyle tam olarak eşleşmesi gereken bir değere sahip value özelliği. Değer, sütunla aynı türde olmalıdır veya Aşağıdaki özelliklerin biri veya her ikisi, filtrelenen sütunla aynı türde: minValue: Hücre için minimum değer. Belirtilen sütundaki hücre değeri, bu değerden büyük veya bu değere eşit olmalıdır. maxValue: Hücre için maksimum değer. Belirtilen sütundaki hücre değeri, bu değerden küçük veya bu değere eşit olmalıdır. minValue (veya maxValue) için boş veya tanımlanmamış değer, aralığın alt (veya üst) sınırının uygulanmayacağı anlamına gelir. İsteğe bağlı başka bir özellik olan test, değer veya aralık filtrelemeyle birleştirilecek bir işlev belirtir. İşlev; hücre değeri, satır/sütun dizinleri ve veri tablosuyla birlikte çağrılır. Satırın sonuçtan hariç tutulması gerekiyorsa yanlış değerini döndürmelidir. Örnek: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}]), dördüncü sütunun (3. sütun dizini 3) tam olarak 42 ve üçüncü sütunun (2. sütun dizini) "bar" ve "foo" (dahil) arasında olduğu tüm satırların dizinlerini artan sırada içeren bir dizi döndürür.
getFormattedValue(rowIndex, columnIndex)	Dize	Verilen satır ve sütun dizinlerindeki hücrenin biçimlendirilmiş değerini döndürür. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. ColumnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Sütun değerlerini biçimlendirme hakkında daha fazla bilgi için sorgu dili referansına bakın. Şu makaleyi de inceleyebilirsiniz: setFormattedValue
getNumberOfColumns()	Sayı	Tablodaki sütun sayısını döndürür.
getNumberOfRows()	Sayı	Tablodaki satır sayısını döndürür.
getProperties(rowIndex, columnIndex)	Nesne	Belirtilen hücre için tüm özelliklerin haritasını döndürür. Özellikler nesnesinin referansla döndürüldüğünü, dolayısıyla alınan nesnedeki değerlerin değiştirilmesinin bunları DataTable içinde değiştirdiğini unutmayın. rowIndex, hücrenin satır dizinidir. columnIndex, hücrenin sütun dizinidir.
getProperty(rowIndex, columnIndex, name)	Otomatik	Adlandırılmış bir özelliğin değerini veya belirtilen hücre için böyle bir özellik ayarlanmadıysa null değerini döndürür. Dönüş türü mülke bağlı olarak değişiklik gösterir. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. name, özellik adına sahip bir dizedir. Ayrıca bkz. setCell setProperties setProperty
getRowProperties(rowIndex)	Nesne	Belirtilen satır için tüm özelliklerin haritasını döndürür. Özellikler nesnesinin referansla döndürüldüğünü, dolayısıyla alınan nesnedeki değerlerin değiştirilmesinin bunları DataTable içinde değiştirdiğini unutmayın. rowIndex, özelliklerin alınacağı satırın dizinidir.
getRowProperty(rowIndex, name)	Otomatik	Adlandırılmış bir özelliğin değerini veya belirtilen satır için böyle bir özellik ayarlanmadıysa null değerini döndürür. Dönüş türü mülke bağlı olarak değişiklik gösterir. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. name, özellik adına sahip bir dizedir. Ayrıca bkz: setRowProperty setRowProperties
getSortedRows(sortColumns)	Sayı dizisi	Temel verilerin sırasını değiştirmeden tablonun sıralanmış sürümünü döndürür. Temel verileri kalıcı olarak sıralamak için sort() çağrısı yapın. sortColumns parametresine aktardığınız türe bağlı olarak, sıralamayı birkaç şekilde belirtebilirsiniz: Tek sayı, sıralanacak sütunun dizinini belirtir. Sıralama, artan düzende olacak. Örnek: sortColumns(3) 4. sütuna göre artan düzende sıralanır. Sıralama ölçütü olarak sütun dizininin numarasını içeren tek bir nesne ve isteğe bağlı desc Boole özelliği. desc doğru değerine ayarlanırsa ilgili sütun azalan düzende sıralanır. Aksi takdirde sıralama artan düzende yapılır. Örnekler: sortColumns({column: 3}) 4. sütuna göre artan düzende sıralanır; sortColumns({column: 3, desc: true}) ise 4. sütuna göre azalan düzende sıralar. Sıralamanın yapılacağı sütun dizinlerine ait sayı dizisi. İlk sayı, sıralamada temel alınacak birincil sütundur. İkinci sayı, ikincil sütundur ve bu şekilde devam eder. Bu, ilk sütundaki iki değer eşit olduğunda sonraki sütundaki değerlerin karşılaştırıldığı ve bu şekilde devam edeceği anlamına gelir. Örnek: sortColumns([3, 1, 6]), ilk olarak 4. sütuna (artan düzende), ardından 2. sütuna (artan düzende) ve 7. sütuna (artan düzende) göre sıralar. Her biri sıralama ölçütü olarak kullanılacak sütun dizini numarasını ve isteğe bağlı bir boole özelliği desc olan bir nesne dizisi. desc doğru değerine ayarlanırsa ilgili sütun azalan düzende sıralanır (varsayılan, artan düzendir). İlk nesne, sıralamada temel alınacak birincil sütundur. İkinci nesne, ikincil sütundur ve bu şekilde devam eder. Bu, ilk sütundaki iki değer eşit olduğunda sonraki sütundaki değerlerin karşılaştırıldığı ve bu şekilde devam edeceği anlamına gelir. Örnek: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}]) ilk olarak 4. sütuna (artan düzende), ardından 2. sütunu azalan düzene ve 7. sütunu azalan düzene göre sıralar. Döndürülen değer, bir sayı dizisidir. Her sayı, DataTable satırının dizinidir. DataTable satırlarında döndürülen dizinin sırasına göre iterasyon yapıldığında, satırların belirtilen sortColumns ile sıralanması gerekir. Çıkış, bir görselleştirmede görüntülenen satır grubunu hızlı bir şekilde değiştirmek için DataView.setRows() için giriş olarak kullanılabilir. Sıralamanın sabit olacağını unutmayın. Bu, iki satırın eşit değerlerine göre sıralama yaparsanız aynı sıralamanın, satırları her defasında aynı sırada döndüreceği anlamına gelir. Ayrıca bkz. sıralama Örnek: Üçüncü sütuna göre sıralanmış satırları yinelemek için şunu kullanın: var rowInds = data.getSortedRows([{column: 2}]); for (var i = 0; i < rowInds.length; i++) { var v = data.getValue(rowInds[i], 2); }
getTableProperties	Nesne	Tabloyla ilgili tüm özelliklerin haritasını döndürür.
getTableProperty(name)	Otomatik	Adlandırılmış bir özelliğin değerini veya tablo için böyle bir özellik ayarlanmadıysa null değerini döndürür. Dönüş türü mülke bağlı olarak değişiklik gösterir. name, özellik adına sahip bir dizedir. Ayrıca bkz: setTableProperties setTableProperty
getValue(rowIndex, columnIndex)	Nesne	Verilen satır ve sütun dizinlerindeki hücrenin değerini döndürür. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Döndürülen değerin türü, sütun türüne bağlıdır (bkz. getColumnType): Sütun türü "dize" ise değer bir dizedir. Sütun türü "number" ise değer, sayıdır. Sütun türü "boole" ise değer, boole'dir. Sütun türü "date" veya "datetime" ise değer, Date nesnesidir. Sütun türü "timeofday" ise değer, dört sayıdan oluşan bir dizidir: [saat, dakika, saniye, milisaniye]. Hücre değeri boş bir değerse null değerini döndürür.
insertColumn(columnIndex, type [,label [,id]])	Yok	Veri tablosuna, belirtilen dizine yeni bir sütun ekler. Belirtilen dizinde veya sonrasında mevcut olan tüm sütunlar daha yüksek bir dizine taşınır. columnIndex, yeni sütun için gerekli dizine sahip bir sayıdır. type, sütunun değerlerinin veri türünü içeren bir dize olmalıdır. Tür, şunlardan biri olabilir: 'string', 'number', 'boolean', 'date', 'datetime', ve 'timeofday'. label, sütunun etiketine sahip bir dize olmalıdır. Sütun etiketi genellikle görselleştirmenin bir parçası olarak gösterilir. Örneğin, bir tablodaki sütun başlığı veya pasta grafikte gösterge etiketi olarak. Herhangi bir değer belirtilmezse boş bir dize atanır. id, sütun için benzersiz tanımlayıcıya sahip bir dize olmalıdır. Herhangi bir değer belirtilmezse boş bir dize atanır. Ayrıca bkz: addColumn
insertRows(rowIndex, numberOrArray)	Yok	Belirtilen satır dizinine belirtilen sayıda satır ekleyin. rowIndex, yeni satırların ekleneceği dizin numarasıdır. Belirtilen dizin numarasından başlayarak satırlar eklenir. numberOrArray, eklenecek yeni ve boş satır sayısı ya da dizine eklenecek bir veya daha fazla doldurulmuş satırdan oluşan bir dizidir. Satır nesneleri dizisi eklemeyle ilgili söz dizimi için addRows() adresine bakın. Şu makaleyi de inceleyebilirsiniz: addRows
removeColumn(columnIndex)	Yok	Belirtilen dizindeki sütunu kaldırır. columnIndex, geçerli sütun dizinine sahip bir sayı olmalıdır. Ayrıca bkz: removeColumns
removeColumns(columnIndex, numberOfColumns)	Yok	Belirtilen dizindeki sütundan başlayarak belirtilen sayıda sütunu kaldırır. numberOfColumns, kaldırılacak sütun sayısıdır. columnIndex, geçerli sütun dizinine sahip bir sayı olmalıdır. Ayrıca bkz: removeColumn
removeRow(rowIndex)	Yok	Belirtilen dizindeki satırı kaldırır. rowIndex, geçerli satır dizinine sahip bir sayı olmalıdır. Şu makaleyi de inceleyebilirsiniz: removeRows
removeRows(rowIndex, numberOfRows)	Yok	Belirtilen dizindeki satırdan başlayarak belirtilen sayıda satırı kaldırır. numberOfRows, kaldırılacak satır sayısıdır. rowIndex, geçerli satır dizinine sahip bir sayı olmalıdır. Ayrıca bkz: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])	Yok	Bir hücrenin değerini, biçimlendirilmiş değerini ve/veya özelliklerini ayarlar. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. value [İsteğe bağlı], belirtilen hücreye atanan değerdir. Bu değerin üzerine yazılmaması için parametreyi undefined, temizlemek için null olarak ayarlayın. Değerin türü, sütun türüne bağlıdır (bkz. getColumnType()): Sütun türü "dize" ise değer bir dize olmalıdır. Sütun türü "number" ise değer bir sayı olmalıdır. Sütun türü "boole" ise değer boole olmalıdır. Sütun türü "date" veya "datetime" ise değer, Date nesnesi olmalıdır. Sütun türü "timeofday" ise değer, dört sayıdan oluşan bir dizi olmalıdır: [saat, dakika, saniye, milisaniye]. formattedValue [İsteğe bağlı], değerin dize olarak biçimlendirilmiş olduğu bir dizedir. Bu değerin üzerine yazılmaması için bu parametreyi undefined olarak ayarlayın. Bu değeri temizlemek ve API'nin gerektiğinde value için varsayılan biçimlendirmeyi uygulamasını sağlamak için parametreyi null, boş biçimlendirilmiş değeri açıkça ayarlamak isterseniz boş dize olarak ayarlayın. Biçimlendirilmiş değer genellikle değer etiketlerini görüntülemek için görselleştirmeler tarafından kullanılır. Örneğin, biçimlendirilmiş değer bir pasta grafiğinde etiket metni olarak görünebilir. properties [İsteğe bağlı], bu hücre için ek özelliklere sahip bir Object (ad/değer eşlemesi). Bu değerin üzerine yazılmaması için parametreyi undefined, temizlemek için null olarak ayarlayın. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. Ayrıca bkz: setValue(), setFormattedValue(), setProperty(), setProperties().
setColumnLabel(columnIndex, label)	Yok	Bir sütunun etiketini ayarlar. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. label, sütuna atanacak etikete sahip bir dizedir. Sütun etiketi genellikle görselleştirmenin bir parçası olarak gösterilir. Örneğin, sütun etiketi bir tabloda sütun başlığı veya bir pasta grafikte gösterge etiketi olarak görüntülenebilir. Ayrıca bkz: getColumnLabel
setColumnProperty(columnIndex, name, value)	Yok	Tek sütun özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. name, özellik adına sahip bir dizedir. value, belirtilen sütunun belirtilen adlandırılmış özelliğine atanabilecek herhangi bir türde bir değerdir. Ayrıca bkz:setColumnProperties getColumnProperty
setColumnProperties(columnIndex, properties)	Yok	Birden çok sütun özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. properties, bu sütun için ek özelliklere sahip bir Object (ad/değer eşlemesi). null belirtilirse sütunun tüm ek özellikleri kaldırılır. Ayrıca bkz: setColumnProperty getColumnProperty
setFormattedValue(rowIndex, columnIndex, formattedValue)	Yok	Hücrenin biçimlendirilmiş değerini ayarlar. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. formattedValue, görüntüleme için biçimlendirilmiş değer içeren bir dizedir. Bu değeri temizlemek ve API'nin hücre değerine gereken şekilde varsayılan biçimlendirme uygulamasını sağlamak için formattedValue null değerini ayarlayın. Boş biçimlendirilmiş bir değeri açıkça ayarlamak için değeri boş bir dize olarak ayarlayın. Şu makaleyi de inceleyebilirsiniz: getFormattedValue
setProperty(rowIndex, columnIndex, name, value)	Yok	Bir hücre özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. name, özellik adına sahip bir dizedir. value, belirtilen hücrenin belirtilen adlandırılmış özelliğine atanabilecek herhangi bir türde değerdir. Ayrıca bkz: setCell setProperties getProperty
setProperties(rowIndex, columnIndex, properties)	Yok	Birden çok hücre özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. properties, bu hücre için ek özelliklere sahip bir Object (ad/değer eşlemesi). null belirtilirse hücrenin tüm ek özellikleri kaldırılır. Ayrıca bkz. setCell setProperty getProperty
setRowProperty(rowIndex, name, value)	Yok	Satır özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. name, özellik adına sahip bir dizedir. value, belirtilen satırın belirtilen adlandırılmış özelliğine atanabilecek herhangi bir türde bir değerdir. Ayrıca bkz: setRowProperties getRowProperty
setRowProperties(rowIndex, properties)	Yok	Birden çok satır özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini görmek için görselleştirme belgelerini inceleyin. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. properties, bu satır için ek özelliklere sahip bir Object (ad/değer eşlemesi). null belirtilirse satırın tüm ek özellikleri kaldırılır. Ayrıca bkz: setRowProperty getRowProperty
setTableProperty(name, value)	Yok	Tek bir tablo özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için tablo, satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini öğrenmek için görselleştirme belgelerini inceleyin. name, özellik adına sahip bir dizedir. value, tablonun belirtilen adlandırılmış özelliğine atanabilecek herhangi bir türde değerdir. Ayrıca bkz: setTableProperties getTableProperty
setTableProperties(properties)	Yok	Birden çok tablo özelliğini ayarlar. Bazı görselleştirmeler, görünüm veya davranışlarını değiştirmek için tablo, satır, sütun veya hücre özelliklerini destekler. Hangi özelliklerin desteklendiğini öğrenmek için görselleştirme belgelerini inceleyin. properties, tablo için ek özelliklere sahip bir Object (ad/değer eşlemesi). null belirtilirse tablonun tüm ek özellikleri kaldırılır. Ayrıca bkz: setTableProperty getTableProperty
setValue(rowIndex, columnIndex, value)	Yok	Bir hücrenin değerini ayarlar. Bu yöntem mevcut herhangi bir hücre değerinin üzerine yazmanın yanı sıra hücrenin biçimlendirilmiş değerini ve özelliklerini de temizler. rowIndex, sıfırdan büyük veya sıfıra eşit ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük bir sayı olmalıdır. columnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Bu yöntem, bu hücre için biçimlendirilmiş bir değer ayarlamanıza izin vermez. Bunu yapmak için setFormattedValue() yöntemini çağırın. value, belirtilen hücreye atanan değerdir. Döndürülen değerin türü, sütun türüne bağlıdır (bkz. getColumnType): Sütun türü "dize" ise değer bir dize olmalıdır. Sütun türü "number" ise değer bir sayı olmalıdır. Sütun türü "boole" ise değer boole olmalıdır. Sütun türü "date" veya "datetime" ise değer, Date nesnesi olmalıdır. Sütun türü "timeofday" ise değer, dört sayıdan oluşan bir dizi olmalıdır: [saat, dakika, saniye, milisaniye]. Herhangi bir sütun türü için değer null olarak ayarlanabilir. Ayrıca bkz: setCell, setFormattedValue, setProperty, setProperties
sort(sortColumns)	Yok	Satırları, belirtilen sıralama sütunlarına göre sıralar. DataTable bu yöntemle değiştirilir. Sıralama ayrıntılarının açıklaması için getSortedRows() adresine göz atın. Bu yöntem sıralanmış verileri döndürmez. Ayrıca bkz: getSortedRows Örnek: Üçüncü sütuna ve ardından ikinci sütuna göre sıralamak için: data.sort([{column: 2}, {column: 1}]);
toJSON()	Dize	DataTable oluşturucuya geçirilebilecek DataTable öğesinin JSON gösterimini döndürür. Örneğin: {"cols":[{"id":"Col1","label":"","type":"date"}], "rows":[ {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]}, {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]} ] }

Oluşturucunun JavaScript Değişmez Değeri data Parametresinin biçimi

data parametresine bir JavaScript dizesi değişmez değer nesnesi ileterek DataTable öğesini başlatabilirsiniz. Bu nesneyi data nesnesi olarak adlandıracağız. Bu nesneyi aşağıdaki açıklamaya göre manuel olarak kodlayabilirsiniz. Python'u nasıl kullanacağınızı biliyorsanız ve siteniz için yardımcı Python kitaplığı kullanabilirsiniz. Bununla birlikte, nesneyi elle oluşturmak istiyorsanız bu bölümde söz dizimi açıklanmaktadır.

Öncelikle, üç satır ve üç sütun (Dize, Sayı ve Tarih türleri) içeren bir tabloyu açıklayan basit bir JavaScript nesnesi örneği gösterelim:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

Şimdi söz dizimini açıklayalım:

data nesnesi, cols ve rows olmak üzere iki üst düzey mülk ve rastgele değerlerin haritası olan isteğe bağlı bir p özelliğinden oluşur.

Not: Gösterilen tüm özellik adları ve dize sabitleri büyük/küçük harfe duyarlıdır. Ayrıca, bir dize değeri almakla açıklanan özelliklerin değerleri tırnak işaretleri arasında olmalıdır. Örneğin, tür özelliğini sayı olarak belirtmek isterseniz bu değer şu şekilde ifade edilir: type: 'number', ancak değerin kendisi (sayısal olarak) şu şekilde ifade edilir: v: 42

cols Mülkü

cols, her sütunun kimliğini ve türünü açıklayan bir nesne dizisidir. Her bir özellik, aşağıdaki özelliklere sahip bir nesnedir (büyük/küçük harfe duyarlı):

• type [Zorunlu] Sütundaki verilerin veri türü. Aşağıdaki dize değerlerini destekler (örnekler, daha sonra açıklanan v: özelliğini içerir):
  • 'boole' - JavaScript boole değeri ('true' veya 'false'). Örnek değer: v:'true'
  • "number" - JavaScript sayı değeri. Örnek değerler: v:7 , v:3.14, v:-55
  • 'string' - JavaScript dize değeri. Örnek değer: v:'hello'
  • "date" - JavaScript Tarih nesnesi (sıfır tabanlı ay), saat kısaltılır. Örnek değer: v:new Date(2008, 0, 15)
  • 'datetime' - Saat içeren JavaScript Tarih nesnesi. Örnek değer: v:new Date(2008, 0, 15, 14, 30, 45)
  • "timeofday" - Saat (0 gece yarısını belirtir), dakika, saniye ve isteğe bağlı milisaniyeyi temsil eden üç rakam ve isteğe bağlı dördüncü bir sayı dizisi. Örnek değerler: v:[8, 15, 0], v: [6, 12, 1, 144]
• id [İsteğe bağlı] Sütunun dize kimliği. Tabloda benzersiz olmalıdır. Temel alfanümerik karakterler kullanın. Böylece ana makine sayfası, JavaScript'te sütuna erişmek için hızlı çıkışlar gerektirmez. JavaScript anahtar kelimesi seçmemeye dikkat edin. Örnek: id:'col_1'
• label [İsteğe bağlı] Bu sütun için bazı görselleştirmelerin görüntülediği dize değeri. Örnek: label:'Height'
• pattern [İsteğe bağlı] Bir veri kaynağı tarafından sayısal, tarih veya saat sütunu değerlerini biçimlendirmek için kullanılan dize kalıbı. Bu açıklama yalnızca referans amaçlıdır. Kalıbı okumanız gerekmez ve var olması da gerekmez. Google Görselleştirme istemcisi bu değeri kullanmaz (hücrenin biçimlendirilmiş değerini okur). DataTable, format ifadesi bulunan sorguya yanıt olarak bir veri kaynağından gelmişse söz konusu ifadede belirttiğiniz kalıp muhtemelen bu değerde döndürülür. Önerilen kalıp standartları ICU DecimalFormat ve SimpleDateFormat türleridir.
• p [İsteğe bağlı] Hücreye uygulanan özel değerlerin eşlemesi olan bir nesne. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz hücre düzeyinde özellikleri destekliyorsa ilgili özellikler açıklanır. Aksi takdirde bu özellik yoksayılır. Örnek: p:{style: 'border: 1px solid green;'}.

cols Örneği

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Mülkü

rows özelliği, bir satır nesneleri dizisi içerir.

Her satır nesnesinin, c adında bir zorunlu özelliği vardır. Bu özellik, bu satırdaki bir hücre dizisidir. Ayrıca, tüm satıra atanacak rastgele özel değerler haritasını tanımlayan isteğe bağlı bir p özelliği de vardır. Görselleştirmeniz satır düzeyinde özellikleri destekliyorsa bu özellik açıklanır. Aksi takdirde bu özellik yoksayılır.

Hücre Nesneleri

Tablodaki her bir hücre, aşağıdaki özelliklere sahip bir nesneyle tanımlanır:

• v [İsteğe bağlı] Hücre değeri. Veri türü, sütun veri türüyle eşleşmelidir. Hücre null ise v özelliği boş olmalıdır, ancak yine de f ve p özelliklerine sahip olabilir.
• f [İsteğe bağlı] v değerinin gösterim için biçimlendirilmiş bir dize sürümü. Değerler gerekmese de genellikle eşleşir. Bu nedenle, v için Date(2008, 0, 1) belirtirseniz bu mülk için "1 Ocak 2008" veya benzer bir dize belirtmeniz gerekir. Bu değer, v değeriyle karşılaştırılmaz. Görselleştirme bu değeri hesaplamada değil, yalnızca görüntüleme etiketi olarak kullanır. Atlanırsa varsayılan biçimlendirici kullanılarak otomatik olarak v dizesi sürümü oluşturulur. f değerleri kendi biçimlendiriciniz kullanılarak değiştirilebilir, setFormattedValue() veya setCell() ile ayarlanabilir ya da getFormattedValue() ile alınabilir.
• p [İsteğe bağlı] Hücreye uygulanan özel değerlerin eşlemesi olan bir nesne. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz hücre düzeyinde özellikleri destekliyorsa ilgili özellikler açıklanır. Bu özellikler, getProperty() ve getProperties() yöntemleriyle alınabilir. Örnek: p:{style: 'border: 1px solid green;'}.

Satır dizisindeki hücreler, cols içindeki sütun açıklamalarıyla aynı sırada olmalıdır. Boş hücreyi belirtmek için null öğesini belirtebilir, dizideki bir hücreyi boş bırakabilir veya sondaki dizi üyelerini çıkarabilirsiniz. Dolayısıyla, ilk iki hücrede null değeri içeren bir satır belirtmek için [ , , {cell_val}] veya [null, null, {cell_val}] değerini belirtebilirsiniz.

Aşağıda, üç satırlık veriyle doldurulmuş üç sütunlu örnek bir tablo nesnesi verilmiştir:

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p Mülkü

Tablo düzeyindeki p özelliği, DataTable öğesinin tamamına uygulanan bir özel değerler eşlemesidir. Bu değerler herhangi bir JavaScript türünde olabilir. Görselleştirmeniz veri tablosu düzeyindeki herhangi bir özelliği destekliyorsa bunları açıklar. Aksi takdirde bu özellik, uygulamada kullanılabilir. Örnek: p:{className: 'myDataTable'}.

DataView Sınıfı

Temel DataTable'ın salt okunur görünümü. DataView, sütunların ve/veya satırların yalnızca bir alt kümesinin seçilmesine izin verir. Ayrıca, sütunların/satırların yeniden sıralanmasına ve sütunların/satırların kopyalanmasına da olanak tanır.

Görünüm, verilerin statik anlık görüntüsü değil, temel DataTable üzerinde canlı bir penceredir. Ancak aşağıda açıklandığı gibi, tablonun yapısını değiştirirken dikkatli olmanız gerekir:

• Temel tabloya sütun eklenmesi veya kaldırılması görünüm tarafından yansıtılmaz. Bu durum, görünümde beklenmedik davranışlara neden olabilir. Bu değişiklikleri almak için DataTable bölümünden yeni bir DataView oluşturmanız gerekir.
• Alttaki tabloya satır eklemek veya tablodan satır kaldırmak güvenlidir ve değişiklikler görünüme hemen aktarılır (ancak yeni satırın oluşturulmasını sağlamak için bu değişiklikten sonra tüm görselleştirmelerde draw() çağırmanız gerekir). Görünümünüz setRows() or hideRows() yöntemlerinden birini çağırarak satırları filtrelediyse ve temel tabloya satır ekler veya mevcut satırları kaldırırsanız bu beklenmedik bir davranış olacağını unutmayın. Yeni tabloyu yansıtmak için yeni bir DataView oluşturmanız gerekir.
• Mevcut hücrelerdeki hücre değerlerinin değiştirilmesi güvenlidir ve değişiklikler hemen DataView içine aktarılır (ancak yeni hücre değerlerinin oluşturulması için bu değişiklikten sonraki tüm görselleştirmelerde draw() yöntemini çağırmanız gerekir).

Başka bir DataView içinden DataView oluşturmak da mümkündür. Temel bir tablo veya görünümden bahsedildiğinde, bu seviyenin hemen altındaki düzeyi ifade ettiğini unutmayın. Başka bir deyişle, bu DataView öğesini oluşturmak için kullanılan veri nesnesini belirtir.

DataView, hesaplanmış sütunları da destekler. Bu sütunlar, sağladığınız bir işlev kullanılarak değeri anında hesaplanan sütunlardır. Dolayısıyla, örneğin, öncesindeki iki sütunun toplamı olan bir sütunu veya başka bir sütundaki bir tarihin takvim çeyreğini hesaplayıp gösteren bir sütun ekleyebilirsiniz. Daha fazla bilgi için setColumns() sayfasına göz atın.

Satır veya sütunları gizleyerek ya da göstererek bir DataView öğesini değiştirdiğinizde görselleştirmede tekrar draw() çağrısı yapılana kadar görselleştirme etkilenmez.

Aşağıda gösterildiği gibi, ilginç bir veri alt kümesi içeren bir DataView oluşturmak için DataView.getFilteredRows() öğesini DataView.setRows() ile birleştirebilirsiniz:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

Markalar

Yeni bir DataView örneği oluşturmanın iki yolu vardır:

Oluşturucu 1

var myView = new google.visualization.DataView(data)

data

Görünümü başlatmak için DataTable veya DataView kullanılır. Varsayılan olarak, görünüm temel veri tablosundaki veya görünümdeki tüm sütun ve satırları orijinal sırayla içerir. Bu görünümde satır veya sütunları gizlemek ya da göstermek için uygun set...() veya hide...() yöntemlerini çağırın.

Şu kaynakları da inceleyin:

setColumns(), hideColumns(), setRows(), hideRows().

 

Oluşturucu 2

Bu oluşturucu, DataTable öğesine serileştirilmiş DataView atayarak yeni bir DataView oluşturur. DataView.toJSON() kullanarak serileştirdiğiniz DataView öğesini yeniden oluşturmanıza yardımcı olur.

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)

veriler

DataView.toJSON() adını verdiğiniz DataView öğesini oluşturmak için kullandığınız DataTable nesnesi. Bu tablo orijinal tablodan farklıysa tahmin edilemeyen sonuçlarla karşılaşırsınız.

viewAsJson

DataView.toJSON() tarafından döndürülen JSON dizesi. Bu, veri DataTable'da hangi satırların gösterileceğinin veya gizleneceğinin açıklamasıdır.

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
getColumnId getColumnLabel getColumnPattern getColumnProperty getColumnRange getColumnType getDistinctValues getFilteredRows getFormattedValue getNumberOfColumns getNumberOfRows getProperty getProperties getRowProperty getSortedRows getTableProperty getValue	DataTable açıklamalarına bakın.	Eşdeğer DataTable yöntemleriyle aynıdır. Tek fark, satır/sütun dizinlerinin temel tablo/görünümdeki değil, görünümdeki dizine atıfta bulunmasıdır.
getTableColumnIndex(viewColumnIndex)	Sayı	Bu görünümdeki dizini tarafından belirtilen belirli bir sütunun temel tablosundaki (veya görünümündeki) dizini döndürür. viewColumnIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfColumns() yönteminin döndürdüğü sütun sayısından küçük olmalıdır. Bu oluşturulmuş bir sütun ise -1 değerini döndürür. Örnek: setColumns([3, 1, 4]) daha önce çağrıldıysa getTableColumnIndex(2), 4 değerini döndürür.
getTableRowIndex(viewRowIndex)	Sayı	Bu görünümdeki dizini tarafından belirtilen belirli bir satırın temel tablosundaki (veya görünümündeki) dizini döndürür. viewRowIndex, sıfıra eşit veya sıfırdan büyük bir sayı ve getNumberOfRows() yönteminin döndürdüğü satır sayısından küçük olmalıdır. Örnek: setRows([3, 1, 4]) daha önce çağrıldıysa getTableRowIndex(2), 4 değerini döndürür.
getViewColumnIndex(tableColumnIndex)	Sayı	Bu görünümde, temel tablodaki (veya görünümdeki) dizini tarafından belirtilen belirli bir sütunla eşleşen dizini döndürür. Böyle birden fazla dizin varsa ilki (en küçük) döndürür. Böyle bir dizin yoksa (belirtilen sütun görünümde değilse), -1 değerini döndürür. tableColumnIndex, sıfırdan büyük veya sıfıra eşit ve temel tablonun/görünümün getNumberOfColumns() yöntemi tarafından döndürülen sütun sayısından küçük bir sayı olmalıdır. Örnek: setColumns([3, 1, 4]) daha önce çağrıldıysa getViewColumnIndex(4), 2 değerini döndürür.
getViewColumns()	Sayı dizisi	Bu görünümdeki sütunları sırayla döndürür. Yani bir diziyle setColumns yöntemini çağırıp getViewColumns() yöntemini çağırırsanız aynı diziyi elde etmeniz gerekir.
getViewRowIndex(tableRowIndex)	Sayı	Bu görünümde, temel tablodaki (veya görünümdeki) dizini tarafından belirtilen belirli bir satırla eşleşen dizini döndürür. Böyle birden fazla dizin varsa ilki (en küçük) döndürür. Böyle bir dizin yoksa (belirtilen satır görünümde değilse), -1 değerini döndürür. tableRowIndex, sıfırdan büyük veya sıfıra eşit ve temel tablonun/görünümün getNumberOfRows() yöntemi tarafından döndürülen satır sayısından küçük bir sayı olmalıdır. Örnek: setRows([3, 1, 4]) daha önce çağrıldıysa getViewRowIndex(4), 2 değerini döndürür.
getViewRows()	Sayı dizisi	Bu görünümdeki satırları sıralı olarak döndürür. Yani bir diziyle setRows yöntemini çağırıp getViewRows() yöntemini çağırırsanız aynı diziyi elde etmeniz gerekir.
hideColumns(columnIndexes)	yok	Geçerli görünümde belirtilen sütunları gizler. columnIndexes, gizlenecek sütunların dizinlerini temsil eden bir sayı dizisidir. Bu dizinler, temel tablo/görünümdeki dizin numaralarıdır. columnIndexes içindeki sayıların sıralı olması gerekmez (yani [3,4,1] kullanılabilir). Geriye kalan sütunlar, iterasyon yaptığınızda dizin sıralarını korur. Zaten gizlenmiş bir sütun için dizin numarası girilmesi hata oluşturmaz ancak temel tabloda/görünümde bulunmayan bir dizin girilmesi hataya neden olur. Sütunları göstermek için setColumns() çağrısı yapın. Örnek: 10 sütunlu bir tablonuz varsa ve setColumns([2,7,1,7,9]) yöntemini, ardından hideColumns([7,9]) yöntemini çağırırsanız görünümdeki sütunlar [2,1] olur.
hideRows(min, max)	Yok	Geçerli görünümde, minimum ve maksimum (dahil) değerleri arasında yer alan dizinlere sahip tüm satırları gizler. Bu, yukarıdaki hideRows(rowIndexes) için kolaylık sağlayan bir söz dizimidir. Örneğin hideRows(5, 10), hideRows([5, 6, 7, 8, 9, 10]) ile eşdeğerdir.
hideRows(rowIndexes)	Yok	Geçerli görünümde belirtilen satırları gizler. rowIndexes, gizlenecek satırların dizinlerini temsil eden bir sayı dizisidir. Bu dizinler, temel tablo/görünümdeki dizin numaralarıdır. rowIndexes içindeki sayıların sıralı olması gerekmez (yani [3,4,1] kullanılabilir). Geri kalan satırlar dizin sıralarını korur. Zaten gizlenmiş bir satır için dizin numarası girilmesi hata değildir. Ancak temel tabloda/görünümde bulunmayan bir dizin girilmesi hataya neden olur. Satırları göstermek için setRows() işlevini çağırın. Örnek: 10 satırlık bir tablonuz varsa ve setRows([2,7,1,7,9]) yöntemini, ardından hideRows([7,9]) yöntemini çağırırsanız görünümdeki satırlar [2,1] olur.
setColumns(columnIndexes)	Yok	Bu görünümde hangi sütunların görülebileceğini belirtir. Belirtilmeyen tüm sütunlar gizlenir. Temel tablo/görünüm veya hesaplanmış sütunlardaki bir sütun dizinleri dizisidir. Bu yöntemi çağırmazsanız varsayılan olarak tüm sütunlar gösterilir. Dizi, aynı sütunu birden çok kez gösterecek şekilde kopyalar da içerebilir. Sütunlar belirtilen sırayla gösterilir. columnIndexes - Sayı ve/veya nesne dizisi (karma olabilir): Sayılar, görünüme dahil edilecek kaynak veri sütununun dizinini belirtir. Veriler değiştirilmeden getirilir. Bir rolü veya ek sütun özelliklerini açıkça tanımlamanız gerekiyorsa sourceColumn özelliğine sahip bir nesne belirtin. Nesneler, hesaplanmış bir sütunu belirtir. Hesaplanmış bir sütun, her satır için anında bir değer oluşturur ve bu değeri görünüme ekler. Nesne aşağıdaki özelliklere sahip olmalıdır: calc [function] - Bir hücrenin değerini hesaplamak için sütundaki her satırda çağrılacak bir işlev. İşlev imzası func(dataTable, row) şeklindedir. Burada dataTable kaynağı DataTable, row ise kaynak veri satırının dizinidir. İşlev, type tarafından belirtilen türde tek bir değer döndürmelidir. type [dize] - calc işlevinin döndürdüğü değerin JavaScript türü. label [İsteğe bağlı, dize]: Oluşturulan bu sütuna atanacak isteğe bağlı bir etiket. Belirtilmezse görünüm sütununda etiket olmaz. id [İsteğe bağlı, dize]: Oluşturulan bu sütuna atanacak isteğe bağlı bir kimlik. sourceColumn - [İsteğe bağlı, sayı] Değer olarak kullanılacak kaynak sütun; belirtilmişse calc veya type özelliğini belirtmeyin. Bu, nesne yerine sayı iletmeye benzer, ancak yeni sütun için bir rol ve özellikler belirtebilmenizi sağlar. properties [İsteğe bağlı, nesne]: Bu sütuna atanacak rastgele özellikler içeren bir nesne. Belirtilmezse görünüm sütununda hiçbir özellik olmaz. role [İsteğe bağlı, dize] - Bu sütuna atanacak bir rol. Belirtilmezse mevcut rol içe aktarılmaz. Örnekler: // Show some columns directly from the underlying data. // Shows column 3 twice. view.setColumns([3, 4, 3, 2]); // Underlying table has a column specifying a value in centimeters. // The view imports this directly, and creates a calculated column // that converts the value into inches. view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]); function cmToInches(dataTable, rowNum){ return Math.floor(dataTable.getValue(rowNum, 1) / 2.54); }
setRows(min, max)	Yok	Bu görünümdeki satırları, min. ve maks. (dahil) arasında yer alan tüm dizinler (temel tabloda/görünümde) olacak şekilde ayarlar. Bu, aşağıdaki setRows(rowIndexes) için kolaylık sağlayan bir söz dizimidir. Örneğin setRows(5, 10), setRows([5, 6, 7, 8, 9, 10]) ile eşdeğerdir.
setRows(rowIndexes)	Yok	Temel alınan tablo/görünümdeki dizin numaralarına dayalı olarak bu görünümdeki görünür satırları ayarlar. rowIndexes, görünümde hangi satırların gösterileceğini belirten bir dizin numaraları dizisi olmalıdır. Dizi, satırların ve satırların kopyalanabileceği sırayı belirtir. Yalnızca rowIndexes için belirtilen satırların gösterileceğini unutmayın. Bu yöntem, görünümdeki diğer tüm satırları siler. Dizi, bu görünümde belirtilen satırın etkili bir şekilde kopyalanmasına neden olan kopyalar da içerebilir (örneğin, setRows([3, 4, 3, 2]), 3 satırının bu görünümde iki kez görünmesine neden olur). Böylece dizi, temel tablo/görünümdeki satırların bu görünümle eşlemesini sağlar. Bu yöntem için giriş oluşturmak üzere getFilteredRows() veya getSortedRows() kullanabilirsiniz. Örnek: Temel bir tablonun/görünümün üçüncü ve sıfır satırlarını içeren bir görünüm oluşturmak için: view.setRows([3, 0])
toDataTable()	DataTable	DataView öğesinin görünür satır ve sütunlarıyla doldurulan bir DataTable nesnesini döndürür.
toJSON()	dize	Bu DataView öğesinin dize gösterimini döndürür. Bu dize gerçek verileri içermez, yalnızca görünür satırlar ve sütunlar gibi DataView ürününe özgü ayarları içerir. Bu görünümü yeniden oluşturmak için bu dizeyi depolayıp statik DataView.fromJSON() oluşturucuya aktarabilirsiniz. Bu, oluşturulan sütunları içermez.

ChartWrapper Sınıfı

Grafiğinizi sarmalamak ve grafiğinizle ilgili tüm yükleme, çizim ve Veri Kaynağı sorgulamalarını gerçekleştirmek için ChartWrapper sınıfı kullanılır. Bu sınıf, grafikte değerleri ayarlamak ve çizmek için kolaylık yöntemleri sunar. Bu sınıf, sorgu geri çağırma işleyici oluşturmanız gerekmediği için bir veri kaynağından okumayı basitleştirir. Bu biçimi, bir grafiği yeniden kullanmak üzere kolayca kaydetmek için de kullanabilirsiniz.

ChartWrapper kullanmanın bir diğer avantajı da dinamik yüklemeyi kullanarak kitaplık yüklemelerinin sayısını azaltabilmenizdir. Ayrıca, ChartWrapper grafik paketlerini arama ve yükleme işlemlerini sizin yerinize yapacağından paketleri açıkça yüklemenize gerek yoktur. Ayrıntılar için aşağıdaki örneklere bakın.

Ancak ChartWrapper şu anda yalnızca grafikler tarafından sağlanan etkinliklerin bir alt kümesini yayar: seç, hazır ve hata. Diğer etkinlikler ChartWrapper örneği üzerinden iletilmez. Diğer etkinlikleri almak için aşağıda gösterildiği gibi doğrudan grafik işleyicide getChart() öğesini çağırmanız ve etkinliklere abone olmanız gerekir:

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

Marka

ChartWrapper(opt_spec)

opt_spec

[İsteğe bağlı] - Grafiği tanımlayan bir JSON nesnesi veya bu nesnenin serileştirilmiş dize sürümü. Bu nesnenin biçimi, drawChart() belgelerinde gösterilmektedir. Belirtilmezse bu nesne tarafından açığa çıkarılan set... yöntemlerini kullanarak uygun tüm özellikleri ayarlamanız gerekir.

Yöntemler

ChartWrapper, aşağıdaki ek yöntemleri sunar:

Yöntem	Dönüş Türü	Açıklama
draw(opt_container_ref)	Yok	Grafiği çizer. Grafikte veya verilerde yaptığınız değişikliklerden sonra değişiklikleri göstermek için bu yöntemi çağırmanız gerekir. opt_container_ref [İsteğe bağlı] - Sayfadaki geçerli bir kapsayıcı öğesine başvuru. Belirtilirse grafik buraya çizilir. Aksi takdirde, grafik containerId tarafından belirtilen kimliğe sahip öğe içinde çizilir.
toJSON()	Dize	Grafiğin JSON gösteriminin dize sürümünü döndürür.
clone()	ChartWrapper	Grafik sarmalayıcının derin bir kopyasını döndürür.
getDataSourceUrl()	Dize	Bu grafik, verilerini bir veri kaynağından alıyorsa bu veri kaynağının URL'sini döndürür. Aksi takdirde null değerini döndürür.
getDataTable()	google.visualization.DataTable	Bu grafik, verilerini yerel olarak tanımlanmış bir DataTable'den alırsa grafiğin DataTable referansını döndürür. Bu grafik, verilerini bir veri kaynağından alırsa null değerini döndürür. Döndürülen nesnede yaptığınız değişiklikler, ChartWrapper.draw() çağrısını tekrar yaptığınızda grafiğe yansıtılır.
getChartType()	Dize	Sarmalanmış grafiğin sınıf adı. Bu bir Google grafiğiyse ad, google.visualization ile uygun olmaz. Örneğin, bu bir Treemap grafiğiyse "google.Visualization.treemap" yerine "Treemap" sonucunu döndürür.
getChartName()	Dize	setChartName() tarafından atanan grafik adını döndürür.
getChart()	Grafik nesnesi referansı	Bu ChartWrapper tarafından oluşturulan grafiğe google.visualization.BarChart veya google.visualization.ColumnChart gibi bir başvuru döndürür. Bu komut, ChartWrapper nesnesinde draw() öğesini çağırmanıza kadar boş bir değer döndürecek ve hazır bir etkinlik döndürecek. Döndürülen nesnede çağrılan yöntemler sayfada yansıtılır.
getContainerId()	Dize	Grafiğin DOM kapsayıcı öğesinin kimliği.
getQuery()	Dize	Bu grafiğin sorgu dizesi (varsa) ve bir veri kaynağını sorgular.
getRefreshInterval()	Sayı	Bir veri kaynağını sorguluyorsa bu grafik için herhangi bir yenileme aralığı. Sıfır, yenileme olmadığını gösterir.
getOption(key, opt_default_val)	Tüm türler	Belirtilen grafik seçeneği değerini döndürür anahtar: Alınacak seçeneğin adı. 'vAxis.title' gibi nitelikli bir ad olabilir. opt_default_value [İsteğe bağlı] - Belirtilen değer tanımsız veya null ise bu değer döndürülür.
getOptions()	Nesne	Bu grafiğin seçenekler nesnesini döndürür.
getView()	Nesne VEYA Dizi	dataview.toJSON() ile aynı biçimde veya bu nesnelerin bir dizisinde DataView başlatıcı nesnesini döndürür.
setDataSourceUrl(url)	Yok	Bu grafik için kullanılacak veri kaynağının URL'sini ayarlar. Bu nesne için ayrıca bir veri tablosu ayarlarsanız veri kaynağı URL'si yoksayılır.
setDataTable(table)	Yok	Grafik için DataTable'ı ayarlar. Şunlardan birini aktarın: null; bir DataTable nesnesi, bir DataTable'ın JSON gösterimi veya bir dizi arrayToDataTable() söz dizimini izleyen bir dizi.
setChartType(type)	Yok	Grafik türünü ayarlar. Sarmalanmış grafiğin sınıf adını iletin. Bu bir Google grafiğiyse google.visualization ile nitelendirilmeyin. Dolayısıyla, örneğin, bir pasta grafik için "PieChart"ı (PieChart) iletin.
setChartName(name)	Yok	Grafik için rastgele bir ad belirler. Bu, özel bir grafik özel olarak kullanılacak şekilde tasarlanmadığı sürece grafiğin hiçbir yerinde gösterilmez.
setContainerId(id)	Yok	Grafik için kapsayıcı DOM öğesinin kimliğini ayarlar.
setQuery(query_string)	Yok	Bu grafik bir veri kaynağını sorguluyorsa bir sorgu dizesi ayarlar. Bu değeri belirtiyorsanız veri kaynağı URL'sini de ayarlamanız gerekir.
setRefreshInterval(interval)	Yok	Bir veri kaynağını sorguluyorsa bu grafik için yenileme aralığını ayarlar. Bu değeri belirtiyorsanız veri kaynağı URL'si de ayarlamanız gerekir. Sıfır, yenileme olmadığını gösterir.
setOption(key, value)	Yok	Tek bir grafik seçeneği değeri belirler. Burada anahtar seçenek adı, değer ise değerdir. Bir seçeneğin ayarını kaldırmak isterseniz değer için null yazın. key değerinin 'vAxis.title' gibi nitelikli bir ad olabileceğini unutmayın.
setOptions(options_obj)	Yok	Bir grafik için tam seçenekler nesnesini ayarlar.
setView(view_spec)	Yok	Temel veriler üzerinde filtre işlevi gören bir DataView başlatıcı nesnesi ayarlar. Grafik sarmalayıcı, bu görünümün uygulanacağı bir DataTable veya veri kaynağındaki temel verilere sahip olmalıdır. Bir dize veya dataview.toJSON() tarafından döndürülen DataView başlatıcı nesnesini aktarabilirsiniz. Ayrıca, DataView başlatıcı nesnesi dizisi aktarabilirsiniz. Bu durumda, dizideki ilk DataView yeni bir veri tablosu oluşturmak için temel verilere uygulanır ve ikinci DataView ilk DataView uygulanmasından elde edilen veri tablosuna uygulanır ve bu şekilde devam eder.

Etkinlikler

ChartWrapper nesnesi aşağıdaki etkinlikleri bildirir. Herhangi bir etkinliğin atılması için ChartWrapper.draw() çağrısı yapmanız gerektiğini unutmayın.

Ad	Açıklama	Özellikler
error	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.	kimlik, ileti
ready	Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve grafiği çizdikten sonra yöntemleri çağırmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir.	Yok
select	Kullanıcı bir çubuğu veya açıklamayı tıkladığında tetiklenir. Bir grafik öğesi seçildiğinde, veri tablosunda karşılık gelen hücre seçilir. Gösterge seçildiğinde, veri tablosundaki karşılık gelen sütun seçilir. Neyin seçildiğini öğrenmek için ChartWrapper.getChart(). getSelection() numaralı telefonu arayın. Bu etiketin yalnızca temel grafik türü bir seçim etkinliği gerçekleştirdiğinde atılacağını unutmayın.	Yok

Örnek

Aşağıdaki iki snippet eşdeğer bir çizgi grafik oluşturur. İlk örnek, grafiği tanımlamak için JSON düz gösterimini, ikinci örnek ise bu değerleri ayarlamak için ChartWrapper yöntemlerini kullanır.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

Aynı grafik, artık belirleyici yöntemleri kullanılıyor:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor Sınıfı

ChartEditor sınıfı, kullanıcının görselleştirmeyi anında özelleştirmesine olanak tanıyan sayfa içi iletişim kutusunu açmak için kullanılır.

ChartEditor'ı kullanmak için:

1. charteditor paketini yükleyin. google.charts.load() üzerinde "charteditor" paketini yükleyin. Düzenleyicide oluşturduğunuz grafik türü için paketleri yüklemenize gerek yoktur. Grafik düzenleyici, gerektiğinde sizin için tüm paketleri yükler.
2. Kullanıcının özelleştirebileceği grafiği tanımlayan bir ChartWrapper nesnesi oluşturun. Bu grafik iletişim kutusunda gösterilir. Kullanıcı düzenleyiciyi kullanarak grafiği yeniden tasarlar, grafik türlerini değiştirir, hatta kaynak verileri değiştirir.
3. Yeni bir ChartEditor örneği oluşturun ve "ok" etkinliğini dinlemek için kaydolun. Kullanıcı, iletişim kutusunda "Tamam" düğmesini tıkladığında bu etkinlik tetiklenir. Aldığınızda, kullanıcı tarafından değiştirilen grafiği almak için ChartEditor.getChartWrapper() değerini çağırmanız gerekir.
4. ChartWrapper'ten geçen ChartEditor.openDialog() numaralı telefonu arayın. İletişim kutusu açılır. İletişim düğmeleri, kullanıcının düzenleyiciyi kapatmasına olanak tanır. ChartEditor örneği, kapsam dahilinde olduğu sürece kullanılabilir; kullanıcı iletişim kutusunu kapattıktan sonra otomatik olarak kaldırılmaz.
5. Koddaki grafiği güncellemek için setChartWrapper() numaralı telefonu arayın.

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
openDialog(chartWrapper, opt_options)	null	Grafik düzenleyiciyi sayfada yerleşik bir iletişim kutusu olarak açar. İşlev hemen geri döner; iletişim kutusunun kapatılmasını beklemez. Örneğin kapsamını kaybetmezseniz iletişim kutusunu yeniden açmak için openDialog() yöntemini tekrar çağırabilirsiniz ancak yine de ChartWrapper nesnesini yeniden iletmeniz gerekir. chartWrapper - Pencerede oluşturulacak ilk grafiği tanımlayan bir ChartWrapper nesnesi. Grafikte, doldurulmuş bir DataTable değeri içermeli veya geçerli bir veri kaynağına bağlı olmalıdır. Bu sarmalayıcı, grafik düzenleyiciye dahili olarak kopyalanır. Böylece, ChartWrapper herkese açık kullanıcı adınızda yapacağınız değişiklikler grafik düzenleyicinin kopyasına yansıtılmaz. opt_options - [İsteğe bağlı] Grafik düzenleyiciyle ilgili tüm seçenekleri içeren bir nesne. Aşağıdaki seçenekler tablosuna bakın.
getChartWrapper()	ChartWrapper	Kullanıcı değişiklikleriyle birlikte grafiği temsil eden bir ChartWrapper döndürür.
setChartWrapper(chartWrapper)	null	Düzenleyicide oluşturulan grafiği güncellemek için bu yöntemi kullanın. chartWrapper - Oluşturulacak yeni grafiği temsil eden bir ChartWrapper nesnesi. Grafikte, doldurulmuş bir DataTable bulunmalıdır veya geçerli bir veri kaynağına bağlı olmalıdır.
closeDialog()	null	Grafik düzenleyici iletişim kutusunu kapatır.

Seçenekler

Grafik düzenleyici aşağıdaki seçenekleri destekler:

Ad	Tür	Varsayılan	Açıklama
dataSourceInput	Öğe tanıtıcısı veya "urlbox"	null	Kullanıcının grafik için bir veri kaynağı belirtmesini sağlamak üzere bunu kullanın. Bu özellik, şu iki değerden biri olabilir: "urlbox" - Grafiğin veri kaynağı URL'sini, düzenlenebilir bir metin kutusunda iletişim kutusunda gösterin. Kullanıcı bunu değiştirebilir. Grafik, yeni veri kaynağına göre yeniden çizilir. DOM öğesi: Bir veri kaynağı seçmek için kullanılacak özel bir HTML öğesi sağlamanıza olanak tanır. HTML öğesine, kodda oluşturulan veya sayfadan kopyalanan herkese açık kullanıcı adlarını iletin. Bu öğe, iletişim kutusunda gösterilir. Bunu, kullanıcının grafiğin veri kaynağını seçmesine izin vermek için kullanın. Örneğin, çeşitli veri kaynağı URL'leri veya kullanıcının aralarından seçim yapabileceği kullanıcı dostu adlar içeren bir liste kutusu oluşturun. Öğe, bir seçim işleyici uygulamalı ve grafiğin veri kaynağını değiştirmek için bunu kullanmalıdır. Örneğin, temel DataTable değerini veya grafiğin dataSourceUrl alanını değiştirin.

Etkinlikler

Grafik düzenleyici aşağıdaki etkinlikleri gönderir:

Ad	Açıklama	Özellikler
ok	Kullanıcı, iletişim kutusundaki "Tamam" düğmesini tıkladığında tetiklenir. Bu yöntemi aldıktan sonra kullanıcı tarafından yapılandırılan grafiği almak için getChartWrapper() öğesini çağırmanız gerekir.	yok
cancel	Kullanıcı iletişim kutusundaki "İptal" düğmesini tıkladığında tetiklenir.	yok

Örnek

Aşağıdaki örnek kod, doldurulmuş bir çizgi grafiğin yer aldığı bir grafik düzenleyici iletişim kutusunu açar. Kullanıcı "Tamam"ı tıklarsa düzenlenen grafik, sayfada belirtilen <div> öğesine kaydedilir.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

Veri Manipülasyon Yöntemleri

google.visualization.data ad alanı, DataTable nesneleri üzerinde SQL benzeri işlemler gerçekleştirmek (ör. nesneleri birleştirmek veya sütun değerine göre gruplandırmak) için statik yöntemler içerir.

google.visualization.data ad alanı, aşağıdaki yöntemleri sunar:

Yöntem	Açıklama
google.visualization.data.group	Belirtilen sütunlardaki değerlere göre gruplandırılmış bir tablo döndürmek için SQL GROUP BY işlemi gerçekleştirir.
google.visualization.data.join	Bir veya daha fazla anahtar sütunundaki iki veri tablosunu birleştirir.

group()

Doldurulmuş DataTable nesnesini alır ve SQL benzeri bir GROUP BY işlemi gerçekleştirir, böylece belirtilen sütun değerlerine göre gruplandırılmış satırlar içeren bir tablo döndürür. Bu işlemin, DataTable girişini değiştirmediğini unutmayın.

Döndürülen tablo, belirtilen anahtar sütunlarındaki her bir değer kombinasyonu için bir satır içerir. Her satır, anahtar sütunları ve anahtar kombinasyonuyla eşleşen tüm satırlarda toplam sütun değerini içeren bir sütun (örneğin, belirtilen sütundaki tüm değerlerin toplamı veya sayısı) içerir.

google.visualization.data ad alanı, birkaç faydalı toplama değeri (örneğin, sum ve count) içerir ancak kendi değerlerinizi (örneğin, standardDeviation veya secondHighest) tanımlayabilirsiniz. Kendi toplayıcınızı nasıl tanımlayacağınızla ilgili talimatlar, yöntem açıklamasından sonra verilmiştir.

Söz dizimi

google.visualization.data.group(data_table, keys, columns)

data_table

Giriş DataTable. Bu ayar, group() çağrısı yapılarak değiştirilmez.

anahtarlar

Hangi sütunların gruplandırılacağını belirten sayı ve/veya nesneler dizisi. Sonuç tablosu, bu dizideki her sütunun yanı sıra sütunlar içindeki her sütunu içerir. Sayıysa bu, gruplandırma ölçütü olarak kullanılacak DataTable girişinin sütun dizinidir. Bir nesneyse belirtilen sütunu değiştirebilen bir işlev içerir (örneğin, bu sütundaki değere 1 ekleyin). Nesne aşağıdaki özelliklere sahip olmalıdır:

• sütun: Dönüşümün uygulanacağı dt sütunundaki bir sütun dizini olan sayı.
• modifier: Bir değer (her bir satır için ilgili sütunda bulunan hücre değeri) kabul eden ve değiştirilen değeri döndüren bir işlevdir. Bu işlev, gruplandırmaya yardımcı olmak için sütun değerini değiştirmek amacıyla kullanılır. Örneğin, bir tarih sütunundan çeyrek hesaplayan bir whoQuarter işlevini çağırarak. Böylece API, satırları çeyreğe göre gruplandırabilir. Hesaplanan değer, döndürülen tablodaki anahtar sütunlarında gösterilir. Bu işlev, bu nesnenin içinde satır içi olarak tanımlanabilir veya kodunuzun başka bir yerinde tanımladığınız bir işlev olabilir (çağrı kapsamında olmalıdır). API, basit bir değiştirici işlev sunar. Kendi, daha faydalı işlevlerinizi nasıl oluşturacağınızla ilgili talimatları burada bulabilirsiniz. Bu işlevin kabul edebileceği veri türünü bilmeniz ve yalnızca söz konusu türdeki sütunlarda çağırmanız gerekir. Ayrıca bu işlevin döndürülen türünü de bilmeniz ve bir sonraki adımda açıklanan type özelliğinde bunu beyan etmeniz gerekir.
• tür: İşlev değiştirici tarafından döndürülen tür. Bu, JavaScript dizesi türünde bir ad olmalıdır (örneğin, "sayı" veya "boole").
• label - [İsteğe bağlı] Bu sütunu döndürülen DataTable içinde atamak için kullanılacak dize etiketi.
• id - [İsteğe bağlı] Bu sütunun döndürülen DataTable içinde atanacağı dize kimliği.

Örnekler: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]

sütunlar

[İsteğe bağlı] Anahtar sütunlarına ek olarak hangi sütunların çıkış tablosuna dahil edileceğini belirtmenizi sağlar. Satır grubundaki tüm satırlar tek bir çıkış satırına sıkıştırıldığından bu satır grubu için hangi değerin görüntüleneceğini belirlemeniz gerekir. Örneğin, kümedeki ilk satırdaki sütun değerini veya bu gruptaki tüm satırların ortalamasını göstermeyi seçebilirsiniz. columns, aşağıdaki özelliklere sahip bir nesne dizisidir:

• sütun: Gösterilecek sütunun dizinini belirten sayı.
• toplama: Bu satır grubunda bu sütunun tüm değerlerinden oluşan bir dizi kabul eden ve sonuç satırında görüntülemek üzere tek bir değer döndüren bir işlev. Döndürülen değer, nesnenin type özelliği tarafından belirtilen türde olmalıdır. Kendi toplama işlevinizi oluşturmayla ilgili ayrıntılı bilgileri aşağıda bulabilirsiniz. Bu yöntemin hangi veri türlerini kabul ettiğini bilmeniz ve yalnızca uygun türdeki sütunlarda çağırmanız gerekir. API, birçok faydalı toplama işlevi sağlar. Liste için aşağıdaki Sağlanan Toplama İşlevleri bölümünü, kendi toplama işlevinizi nasıl yazacağınızı öğrenmek için ise Toplama işlevi oluşturma bölümünü inceleyin.
• type: Toplama işlevinin döndürülen türü. Bu, JavaScript dizesi türünde bir ad olmalıdır (örneğin, "sayı" veya "boole").
• label - [İsteğe bağlı] Döndürülen tabloda bu sütuna uygulanacak bir dize etiketi.
• id - [İsteğe bağlı] Döndürülen tabloda bu sütuna uygulanacak dize kimliği.

Döndürülen Değer

Anahtarlarda listelenen her sütun için bir sütun ve sütunlar içinde listelenen her sütun için bir sütun içeren bir DataTable. Tablo, anahtar satırlarına göre soldan sağa doğru sıralanır.

Örnek

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

Sağlanan Değiştirici İşlevleri

API, anahtarlara iletebileceğiniz aşağıdaki değiştirici işlevleri sağlar. modifier parametresini kullanın.

İşlev	Giriş Dizisi Türü	Dönüş Türü	Açıklama
google.visualization.data.month	Tarih	sayı	Bir tarih verildiğinde sıfır tabanlı ay değerini döndürür (0, 1, 2 vb.).

Sağlanan Toplama İşlevleri

API, sütunlara iletebileceğiniz aşağıdaki toplama işlevlerini sağlar. toplama parametre dizisidir.

İşlev	Giriş Dizisi Türü	Dönüş Türü	Açıklama
google.visualization.data.avg	sayı	sayı	Geçirilen dizinin ortalama değeri.
google.visualization.data.count	tüm türler	sayı	Gruptaki satır sayısı. Boş ve yinelenen değerler sayılır.
google.visualization.data.max	sayı, dize, Tarih	number, string, Date, null	Dizideki maksimum değer. Bu, dizeler için sözlüksel olarak sıralanmış listedeki ilk öğedir. Tarih değerleri için en son tarihtir. Boş değerler yoksayılır. Maksimum değer yoksa boş değerini döndürür.
google.visualization.data.min	sayı, dize, Tarih	number, string, Date, null	Dizideki minimum değerdir. Dizeler için bu, sözlüksel olarak sıralanan bir listedeki son öğedir. Tarih değerleri için en erken tarihtir. Boş değerler yoksayılır. Minimum değer yoksa boş değerini döndürür.
google.visualization.data.sum	sayı	sayı	Dizideki tüm değerlerin toplamı.

Değiştirici işlev oluşturma

group() işlevi satırlarınızı gruplandırmadan önce anahtar değerlerinde basit bir dönüştürme işlemi gerçekleştirmek için değiştirici işlev oluşturabilirsiniz. Bu işlev tek bir hücre değeri alır, bu değer üzerinde bir işlem gerçekleştirir (örneğin, değere 1 ekler) ve bu değeri döndürür. Giriş ve dönüş türlerinin aynı türde olması gerekmez ancak çağrıyı yapanın giriş ve çıkış türlerini bilmesi gerekir. Tarih kabul eden ve üç aylık dönemi döndüren bir işlev örneğini burada bulabilirsiniz:

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

Toplama işlevi oluşturma

Bir satır grubunda bir sütun değerleri grubunu kabul eden ve tek bir sayı döndüren (ör. değerlerin bir sayısını veya ortalamasını döndüren) toplama işlevi oluşturabilirsiniz. Aşağıda, sağlanan sayı toplama işlevinin uygulamasını görebilirsiniz. Bu işlev, satır grubunda kaç satır olduğunu döndürür:

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

Bu yöntem, iki veri tablosunu (DataTable veya DataView nesneleri) SQL JOIN ifadesine benzer bir şekilde tek bir sonuç tablosunda birleştirir. İki tablo arasında bir veya daha fazla sütun çifti (anahtar sütunu) belirtirsiniz ve çıkış tablosu, belirttiğiniz bir birleştirme yöntemine göre satırları içerir: yalnızca her iki anahtarın eşleştiği satırlar; bir tablodaki tüm satırlar veya anahtarların eşleşip eşleşmediğine bakılmaksızın her iki tablodaki tüm satırlar. Sonuçlar tablosu yalnızca anahtar sütunlarını ve belirttiğiniz ek sütunları içerir. dt2'nin kopya anahtarları olamayacağını ancak dt1'in yinelenen anahtarlara sahip olabileceğini unutmayın. "Anahtar" terimi, belirli bir anahtar sütunu değerinin değil, tüm anahtar sütunu değerlerinin kombinasyonu anlamına gelir. Dolayısıyla bir satırda A | B | C hücre değerleri ve 0 ve 1 anahtar sütun değerleri varsa bu satırın anahtarı AB olur.

Söz dizimi

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);

dt1

dt2 ile katılmak için doldurulan DataTable.

dt2

dt1 ile katılmak için doldurulmuş bir DataTable. Bu tabloda birden fazla birbirinin aynı anahtar bulunamaz (anahtar, anahtar sütunu değerlerinin bir kombinasyonudur).

joinMethod

Birleştirme türünü belirten dize. dt1'de bir dt2 satırıyla eşleşen birden fazla satır varsa çıkış tablosu, eşleşen tüm dt1 satırlarını içerir. Aşağıdaki değerler arasından seçim yapın:

• "full": Çıkış tablosu, anahtarların eşleşip eşleşmediğinden bağımsız olarak her iki tablodaki tüm satırları içerir. Eşleşmeyen satırlarda boş hücre girişleri olur, eşleşen satırlar birleştirilir.
• "inner" - Tam birleştirme, yalnızca anahtarların eşleştiği satırları içerecek şekilde filtrelendi.
• "left": Çıkış tablosu, dt2 kaynağında eşleşen satırlar olup olmadığına bakılmaksızın, dt1 kaynağındaki tüm satırları içerir.
• "right": Çıkış tablosu, dt1'den eşleşen satırlar olup olmadığına bakılmaksızın, dt2'deki tüm satırları içerir.

anahtarlar

Her iki tablodan karşılaştırılacak anahtar sütunları dizisi. Her çift iki öğeli bir dizidir. İlki dt1 içinde bir anahtar, ikincisi ise dt2'de bir anahtardır. Bu dizi, sütunları dizine, kimlik veya etikete göre belirtebilir. Bkz. getColumnIndex.
Sütunlar her iki tabloda da aynı türde olmalıdır. Belirtilen tüm anahtarların, tablodan bir satır eklemek için joinMethod tarafından verilen kurala göre eşleşmesi gerekir. Anahtar sütunları her zaman çıkış tablosuna dahil edilir. Yalnızca soldaki tablo olan dt1 kopya anahtarlar içerebilir. dt2'deki anahtarlar benzersiz olmalıdır. Burada "anahtar" terimi, tek tek sütun değerleri değil, benzersiz bir anahtar sütunları grubu anlamına gelir. Örneğin, anahtar sütunlarınız A ve B olsaydı aşağıdaki tabloda yalnızca benzersiz anahtar değerleri olur (ve bu nedenle dt2 olarak kullanılabilir):

CEVAP	B
Ceyda	Kırmızı
Ceyda	Mavi
Faruk	Kırmızı

Örnek: [[0,0], [2,1]], her iki tablodaki ilk sütun ve dt1'den gelen üçüncü sütun ile dt1'deki ikinci sütundaki değerleri karşılaştırır.

dt1Columns

dt1'in anahtar sütunlarına ek olarak çıkış tablosuna dahil edilecek dt1 sütun dizisi. Bu dizi, sütunları dizinlerine, kimliklerine veya etiketlerine göre belirtebilir. (bkz. getColumnIndex.)

dt2Columns

dt2'nin anahtar sütunlarına ek olarak çıkış tablosuna dahil edilecek dt2 sütunları dizisi. Bu dizi, sütunları dizinlerine, kimliklerine veya etiketlerine göre belirtebilir. (bkz. getColumnIndex.)

Döndürülen Değer

dt1Columns ve dt1Columns anahtar sütunlarını içeren bir DataTable. Bu tablo, anahtar sütunlarına göre soldan sağa doğru sıralanır. joinMethod "inner" olduğunda, tüm anahtar hücreleri doldurulmalıdır. Diğer birleştirme yöntemlerinde, eşleşen anahtar bulunamazsa tabloda eşleşmeyen tüm anahtar hücreleri için boş değer görünür.

Örnekler

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

Biçimlendiriciler

Google Görselleştirme API'si, görselleştirmedeki verileri yeniden biçimlendirmek için kullanılabilen biçimlendiriciler sağlar. Bu biçimlendiriciler, tüm satırlarda belirtilen sütunun biçimlendirilmiş değerini değiştirir. Unutmayın:

• Biçimlendiriciler yalnızca biçimlendirilmiş değerleri değiştirir, temel değerleri değiştirmez. Örneğin, gösterilen değer "1.000,00 ABD doları" olur ancak temel değer yine de "1.000" olur.
• Biçimlendiriciler aynı anda yalnızca bir sütunu etkiler. Birden çok sütunu yeniden biçimlendirmek için değiştirmek istediğiniz her sütuna bir biçimlendirici uygulayın.
• Kullanıcı tanımlı biçimlendiriciler de kullanıyorsanız belirli Google görselleştirme biçimlendiricileri, kullanıcı tanımlı tüm biçimlendiricileri geçersiz kılar.

Verilere uygulanan gerçek biçimlendirme, API'nin yüklendiği yerel ayardan türetilir. Daha fazla ayrıntı için belirli bir yerel ayara sahip grafikleri yükleme bölümüne bakın.

Önemli: Biçimlendiriciler yalnızca DataTable ile kullanılabilir; DataView ile kullanılamaz (DataView nesne salt okunurdur).

Biçimlendirici kullanmaya ilişkin genel adımlar şunlardır:

1. Doldurulan DataTable nesnenizi alın.
2. Yeniden biçimlendirmek istediğiniz her sütun için:
   1. Biçimlendiricinize ilişkin tüm seçenekleri belirten bir nesne oluşturun. Bu, bir dizi özellik ve değere sahip temel bir JavaScript nesnesidir. Hangi özelliklerin desteklendiğini görmek için biçimlendiricinizin belgelerine bakın. (İsteğe bağlı olarak, seçeneklerinizi belirten bir nesne değişmez notasyon nesnesi aktarabilirsiniz.)
   2. Seçenekler nesnenizi ileterek biçimlendiricinizi oluşturun.
   3. Yeniden biçimlendirilecek verilerin DataTable ve (sıfır tabanlı) sütun numarasını ileterek formatter.format(table, colIndex) yöntemini çağırın. Her sütuna yalnızca tek bir biçimlendirici uygulayabileceğinizi unutmayın. İkinci bir biçimlendirici uygulandığında, ilkinin etkilerinin üzerine yazılır.
      Önemli: Birçok biçimlendirici, özel biçimlendirme görüntülemek için HTML etiketlerinin kullanılmasını gerektirir. Görselleştirmeniz allowHtml seçeneğini destekliyorsa "doğru" olarak ayarlamanız gerekir.

Bir tarih sütununun biçimlendirilmiş tarih değerlerini uzun tarih biçimi ("1 Ocak 2009") kullanacak şekilde değiştirmeyle ilgili bir örneği burada bulabilirsiniz:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

Çoğu biçimlendirici aşağıdaki iki yöntemi sunar:

Yöntem	Açıklama
google.visualization.formatter_name(options)	Oluşturucu, burada formatter_name belirli bir biçim sınıfı adıdır. options - Bu biçimlendiriciye ilişkin seçenekleri belirten genel bir JavaScript nesnesi. Bu nesne, söz konusu biçimlendiriciye özgü özelliklere sahip özellik/değer çiftlerine sahip genel bir nesnedir. Desteklenen seçenekleri öğrenmek için biçimlendiricinize özel dokümanlara bakın. Aşağıda, iki özelliği ileterek DateFormat nesnesinin oluşturucusunu çağırmanın iki örnek yolunu bulabilirsiniz: // Object literal technique var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5}); // Equivalent property setting technique var options = new Object(); options['formatType'] = 'long'; options['timeZone'] = -5; var formatter = new google.visualization.DateFormat(options);
format(data, colIndex)	Belirtilen sütundaki verileri yeniden biçimlendirir. data - Yeniden biçimlendirilecek verileri içeren bir DataTable. Burada DataView kullanamazsınız. colIndex- Biçimlendirilecek sütunun sıfır tabanlı dizini. Birden çok sütunu biçimlendirmek için bu yöntemi farklı colIndex değerleriyle birden çok kez çağırmanız gerekir.

 

Google Görselleştirme API'sı aşağıdaki biçimlendiricileri sağlar:

Biçimlendirici Adı	Açıklama
ArrowFormat	Hücre değerinin belirtilen bir değerin üstünde mi yoksa altında mı olduğunu belirten bir yukarı veya aşağı ok ekler.
BarFormat	Yönü ve rengi, hücre değerinin belirtilen bir değerin üstünde mi yoksa altında mı olduğunu belirten renkli bir çubuk ekler.
ColorFormat	Bir hücreyi değerlerin belirli bir aralıkta olup olmadığına göre renklendirir.
DateFormat	Date veya DateTime değerini, "1 Ocak 2009", "1.1.09" ve "1 Ocak 2009" gibi birkaç farklı şekilde biçimlendirir.
NumberFormat	Sayısal değerlerin çeşitli yönlerini biçimlendirir.
PatternFormat	Aynı satırdaki hücre değerlerini, rastgele bir metinle birlikte belirtilen bir hücrede birleştirir.

ArrowFormat

Değerin belirtilen temel değerin üstünde veya altında olmasına bağlı olarak sayısal bir hücreye yukarı veya aşağı ok ekler. Taban değere eşitse ok gösterilmez.

Seçenekler

ArrowFormat, oluşturucuya iletilen aşağıdaki seçenekleri destekler:

Option	Açıklama
base	Hücre değerine göre karşılaştırma yapmak için kullanılan, taban değeri belirten bir sayı. Hücre değeri daha yüksekse hücrede yeşil bir yukarı ok yer alır. Hücre değeri düşükse aşağı doğru kırmızı bir ok bulunur. Aynı değer aynıysa ok bulunmaz.

Örnek kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

BarFormat

Sayısal bir hücreye, hücre değerinin belirtilen temel değerin üstünde mi yoksa altında mı olduğunu gösteren renkli bir çubuk ekler.

Seçenekler

BarFormat, oluşturucuya iletilen aşağıdaki seçenekleri destekler:

Option	Örnek Açıklama
base	Hücre değerinin karşılaştırılacağı taban değer olan sayı. Hücre değeri yüksekse tabanın sağına, düşükse sola doğru çizilir. Varsayılan değer 0'dır.
colorNegative	Çubukların negatif değer bölümünü gösteren bir dize. Olası değerler "kırmızı", "yeşil" ve "mavi"dir; varsayılan değer "kırmızı"dır.
colorPositive	Çubukların pozitif değer bölümünün rengini gösteren bir dize. Olası değerler "kırmızı", "yeşil" ve "mavi"dir. Varsayılan renk "mavi"dir.
drawZeroLine	Negatif değerler mevcut olduğunda 1 piksel koyu taban çizginin çizilip çizilmeyeceğini gösteren boole değeri. Koyu çizgi, çubukların görsel taramasını iyileştirmek için kullanılır. Varsayılan değer "false"tur.
max	Çubuk aralığı için maksimum sayı değeri. Varsayılan değer, tablodaki en yüksek değerdir.
min	Çubuk aralığı için minimum sayı değeri. Varsayılan değer, tablodaki en düşük değerdir.
showValue	Doğru değerine ayarlanırsa değerleri ve çubukları gösterir, yanlışsa yalnızca çubukları gösterir. Varsayılan değer, doğru değeridir.
width	Her çubuğun piksel cinsinden kalınlığı. Varsayılan değer 100'dür.

Örnek kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

ColorFormat

Hücre değerine bağlı olarak, sayısal bir hücrenin ön planına veya arka planına renk atar. Bu biçimlendirici, oluşturucuda seçeneklerini almadığı için olağan dışıdır. Bunun yerine, format() yöntemini çağırmadan önce renk aralıkları eklemek için addRange() veya addGradientRange() yöntemini istediğiniz kadar çağırmalısınız. Renkler, kabul edilebilir herhangi bir HTML biçiminde (ör. "siyah", "#000000" veya "#000") belirtilebilir.

Yöntemler

ColorFormat aşağıdaki yöntemleri destekler:

Yöntem	Açıklama
google.visualization.ColorFormat()	Oluşturucu. Bağımsız değişken kabul edilmez.
addRange(from, to, color, bgcolor)	Hücre değerine bağlı olarak, hücrenin ön plan rengini ve/veya arka plan rengini belirtir. Belirtilen from - to aralığında bir değere sahip tüm hücrelere color ve bgcolor özellikleri atanır. 1-1.000 ve 1.000-2.000 arasında bir saniye aralığı oluşturmak 1.000 değerini kapsamayacağından aralığın kapsayıcı olmadığını unutmayın. from - [String, Number, Date, DateTime veya TimeOfDay] Aralığın alt sınırı (dahil) veya null. Null ise -∞ ile eşleşir. Dize sınırları, dize değerleriyle alfabetik olarak karşılaştırılır. to - [String, Number, Date, DateTime veya TimeOfDay] Aralığın yüksek sınırı (dahil değildir) veya null. Null ise +∞ ile eşleşir. Dize sınırları, dize değerleriyle alfabetik olarak karşılaştırılır. color - Eşleşen hücrelerdeki metne uygulanacak renk. Değerler, "#RRGGBB" değerleri veya tanımlanmış renk sabitleri olabilir (örnek: "#FF0000" veya "kırmızı"). bgcolor - Eşleşen hücrelerin arka planına uygulanacak renk. Değerler, "#RRGGBB" değerleri veya tanımlanmış renk sabitleri olabilir (örnek: "#FF0000" veya "kırmızı").
addGradientRange(from, to, color, fromBgColor, toBgColor)	Hücre değerine göre bir aralıktan arka plan rengi atar. Renk, hücrenin değeriyle alt sınır renginden üst sınır rengine kadar bir aralıktaki değerle eşleşecek şekilde ölçeklendirilir. addRange() gibi, bu yöntemin dize değerlerini karşılaştıramayacağını unutmayın. İpucu: Renk aralıklarının doğru şekilde ölçülmesi genellikle zordur.En basit ve kolay okunan aralık, tamamen doymuş bir renkten beyaza (ör. #FF0000 - FFFFFF bulunur. from - [Number, Date, DateTime veya TimeOfDay] Aralığın alt sınırı (dahil) veya null. Null ise -∞ ile eşleşir. to - [Number, Date, DateTime veya TimeOfDay] Aralığın üst sınırı (dahil değildir) veya null. Null ise +∞ ile eşleşir. color - Eşleşen hücrelerdeki metne uygulanacak renk. Bu renk, değeri ne olursa olsun tüm hücreler için aynıdır. fromBgColor - Renk geçişinin alt ucunda değer içeren hücrelerin arka plan rengi. Değerler, "#RRGGBB" değerleri veya tanımlanmış renk sabitleri olabilir (örnek: "#FF0000" veya "kırmızı"). toBgColor - Renk geçişinin üst ucunda değer içeren hücrelerin arka plan rengi. Değerler, "#RRGGBB" değerleri veya tanımlanmış renk sabitleri olabilir (örnek: "#FF0000" veya "kırmızı").
format(dataTable, columnIndex)	Belirtilen sütuna biçimlendirme uygulamak için kullanılan standart format() yöntemi.

Örnek kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

DateFormat

JavaScript Date değerini "1 Ocak 2016", "1.1.2016" ve "1 Ocak 2016" gibi çeşitli şekillerde biçimlendirir.

Seçenekler

DateFormat, oluşturucuya iletilen aşağıdaki seçenekleri destekler:

Option	Açıklama
formatType	Tarih için hızlı bir biçimlendirme seçeneği. 28 Şubat 2016 tarihi, gösterildiği gibi yeniden biçimlendirildiğinde aşağıdaki dize değerleri desteklenir: "short" (kısa) - Kısa biçim: ör. "28/02/16" "medium" - Orta biçim: ör. "28 Şubat 2016" "long" - Uzun biçim: ör. "28 Şubat 2016" formatType ve pattern aynı anda belirtilemez.
pattern	Değere uygulanacak özel bir biçim kalıbı, ICU tarih ve saat biçimine benzer. Örnek: var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"}); formatType ve pattern aynı anda belirtilemez. Kalıplar hakkında daha fazla bilgiyi bir sonraki bölümde bulabilirsiniz.
timeZone	Tarih değerinin gösterileceği saat dilimi. Bu, GMT + bu saat dilimi sayısını (negatif olabilir) gösteren sayısal bir değerdir. Tarih nesnesi, varsayılan olarak, oluşturuldukları bilgisayarın varsayılan saat dilimi kullanılarak oluşturulur. Bu seçenek, söz konusu değeri farklı bir saat diliminde görüntülemek için kullanılır. Örneğin, Greenwich, İngiltere'deki bir bilgisayarda saat 17:00'de bir Tarih nesnesi oluşturduysanız ve saat dilimini -5 (options['timeZone'] = -5 veya ABD'de Doğu Pasifik Saati) olarak belirttiyseniz görüntülenen değer 12 öğlen olur.

Yöntemler

DateFormat aşağıdaki yöntemleri destekler:

Yöntem	Açıklama
google.visualization.DateFormat(options)	Oluşturucu. Daha fazla bilgi için yukarıdaki seçenekler bölümüne bakın.
format(dataTable, columnIndex)	Belirtilen sütuna biçimlendirme uygulamak için kullanılan standart format() yöntemi.
formatValue(value)	Belirli bir değerin biçimlendirilmiş değerini döndürür. Bu yöntem DataTable gerektirmez.

Örnek kod

function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

Tarih Kalıpları Hakkında Daha Fazla Bilgi

Burada, hangi kalıpların desteklendiğiyle ilgili daha fazla ayrıntı bulabilirsiniz:

Kalıplar Yoğun bakım ünitesi tarih ve saat biçimine benzer, ancak şu kalıplar henüz desteklenmemektedir: A e D F g Y u w W. Kalıplarla çakışmayı önlemek için çıkışta görünmesini istediğiniz tüm düz metinler tek tırnak içine alınmalıdır (ör.iki kez katlanması gereken tek tırnak işareti hariç). "K 'o''clock.'".

Kalıp	Açıklama	Örnek Çıkış
GG	Dönem tanımlayıcısı.	"REKLAM"
yy veya yyyy	olduğunu görebilirsiniz.	1996
M	Yılın ayı. Ocak için: M 1 üretir MM, 01 değerini verir MMM Ocak ayında üretir MMMM, Ocak ayında	"Temmuz" "07"
g	Ayın günü. Fazladan "d" değerleri baştaki sıfırları ekler.	10
sa.	12 saatlik ölçekte saat. Fazladan "h" değerleri baştaki sıfırları ekler.	12
VR	24 saatlik ölçekte saat. Fazladan Hk' değerleri baştaki sıfırları ekler.	0
dk.	Dakika cinsinden saat. Fazladan 'M' değerleri, baştaki sıfırları ekler.	30
sn.	Dakikadan saniye. Fazladan "s" değerleri, baştaki sıfırları ekler.	55
S	Kesirli saniye. Fazladan "S" değerleri sağ tarafa sıfırlarla doldurulur.	978
E	Haftanın günü. "Salı" için aşağıdaki çıkışlar: E, T üretir EE veya EEE Üretimi Sal veya Sal EEEE Ürünleri Salı	"Sal" "Salı"
aa	ÖÖ/ÖS	"ÖS"
k	Günün saati (1~24). Fazladan "k" değerleri baştaki sıfırları ekler.	24
K	Saat (00~11) Fazladan "k" değerleri baştaki sıfırları ekler.	0
z	Saat dilimi. Saat dilimi 5 için "UTC+5" değerini döndürür	"UTC+5"
Z	RFC 822 biçiminde saat dilimi. 5. saat dilimi için: Z, ZZ, ZZZ -0500 ZZZZ ve diğerleri "GMT -05:00" üretiyor	"-0800" "GMT -05:00"
v	Saat dilimi (genel).	"vb./GMT-5"
'	metin için çıkış	"Tarih="
''	tek tırnak	''yy

NumberFormat

Sayısal sütunların nasıl biçimlendirilmesi gerektiğini açıklar. Biçimlendirme seçenekleri arasında bir önek simgesi (ör. dolar işareti) veya binlik işareti olarak kullanılacak noktalama işareti belirtilir.

Seçenekler

NumberFormat, oluşturucuya iletilen aşağıdaki seçenekleri destekler:

Option	Açıklama
decimalSymbol	Ondalık işaretçi olarak kullanılacak karakter. Varsayılan değer noktadır (.).
fractionDigits	Ondalıktan sonra kaç basamak gösterileceğini belirten sayıdır. Varsayılan değer 2'dir. Sayının içerdiğinden daha fazla basamak belirtirseniz daha küçük değerler için sıfırlar gösterilir. Kısaltılan değerler yuvarlanır (5 tane yukarı yuvarlanır).
groupingSymbol	Ondalık sayının solundaki sayıları üçlü kümeler halinde gruplandırmak için kullanılan karakter. Varsayılan değer virgüldür (,).
negativeColor	Negatif değerler için metin rengi. Varsayılan değer yok. Değerler, "kırmızı" veya "#FF0000" gibi kabul edilebilir herhangi bir HTML renk değeri olabilir.
negativeParens	Boole; doğru, negatif değerlerin parantez içine alınması gerektiğini belirtir. Varsayılan değer, doğru değeridir.
pattern	Biçim dizesi. Bu ayar sağlandığında negativeColor dışındaki diğer tüm seçenekler yoksayılır. Biçim dizesi, ICU kalıbı kümesinin alt kümesidir. Örneğin {pattern:'#,###%'} işlevi 10, 7,5 ve 0,5 değerleri için "%1.000", "%750" ve "%50" çıkış değerleri verir.
prefix	Değer için dize öneki (ör. "$").
suffix	Değer için dize son eki (ör. "%").

Yöntemler

NumberFormat aşağıdaki yöntemleri destekler:

Yöntem	Açıklama
google.visualization.NumberFormat(options)	Oluşturucu. Daha fazla bilgi için yukarıdaki seçenekler bölümüne bakın.
format(dataTable, columnIndex)	Belirtilen sütuna biçimlendirme uygulamak için kullanılan standart format() yöntemi.
formatValue(value)	Belirli bir değerin biçimlendirilmiş değerini döndürür. Bu yöntem DataTable gerektirmez.

Örnek kod

var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

PatternFormat

Tanımlanmış sütunların değerlerini rastgele metinle birlikte tek bir sütunda birleştirmenizi sağlar. Örneğin, ad için bir sütununuz ve soyadı için bir sütununuz varsa üçüncü sütunu {last name}, {first name} ile doldurabilirsiniz. Bu biçimlendirici, oluşturucu ve format() yöntemi kurallarına uymaz. Talimatlar için aşağıdaki Yöntemler bölümüne bakın.

Yöntemler

PatternFormat aşağıdaki yöntemleri destekler:

Yöntem	Açıklama
google.visualization.PatternFormat(pattern)	Oluşturucu. Seçenekler nesnesi almıyor. Bunun yerine bir dize pattern parametresi alır. Bu dize, herhangi bir rastgele metinle birlikte hedef sütuna hangi sütun değerlerinin ekleneceğini açıklayan dizedir. Yerleştirilecek başka bir sütundaki bir değeri belirtmek için dizenize yer tutucular yerleştirin. Yer tutucular {#} şeklindedir. Burada #, kullanılacak kaynak sütunun dizinidir. Dizin, aşağıdaki format() yönteminde yer alan srcColumnIndices dizisindeki bir dizindir. Değişmez { veya } karakteri eklemek için şu şekilde kod dışına alın: \{ veya \}. Değişmez \ işareti eklemek için çıkış olarak \\ olarak çıkış yapın. Örnek kod Aşağıdaki örnekte, birinci ve ikinci öğelerin format() yönteminden alındığı bağlantı öğesi oluşturan bir kalıbın kurucusu gösterilmiştir: var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>');
format(dataTable, srcColumnIndices, opt_dstColumnIndex)	Birkaç ek parametre içeren standart biçimlendirme çağrısı: dataTable: Üzerinde çalışılacak DataTable. srcColumnIndices: Temel DataTable'dan kaynak olarak alınacak bir veya daha fazla (sıfır tabanlı) sütun dizini dizisi. Bu, oluşturucudaki pattern parametresi için bir veri kaynağı olarak kullanılır. Sütun numaralarının sıralı sırada olması gerekmez. opt_dstColumnIndex - [isteğe bağlı] pattern değiştirme işleminin çıkışının yerleştirileceği hedef sütun. Belirtilmezse srcColumIndices içindeki ilk öğe hedef olarak kullanılır. Tablodan sonraki biçimlendirme örneklerini inceleyin.

Aşağıda, dört sütunlu bir tablo için birkaç örnek giriş ve çıkış verilmiştir.

Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

Örnek kod

Aşağıdaki örnekte, e-posta adresi oluşturmak için iki sütundaki verilerin nasıl birleştirileceği gösterilmektedir. Orijinal kaynak sütunları gizlemek için bir DataView nesnesi kullanır:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', '[e-mail]'],
  ['Paul McCartney', '[e-mail]'],
  ['George Harrison', '[e-mail]'],
  ['Ringo Starr', '[e-mail]']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

GadgetHelper

Google Görselleştirme API'sını kullanan Öğeleri yazmayı basitleştirmeye yardımcı olan bir yardımcı sınıf.

Marka

google.visualization.GadgetHelper()

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
createQueryFromPrefs(prefs)	google.visualization.Query	Statik. Yeni bir google.visualization.Query örneği oluşturun ve özelliklerini, cihaz tercihlerinden alınan değerlere göre ayarlayın. prefs parametresinin türü _IG_Prefs şeklindedir Sorgu veri kaynağı URL'sini ayarlamak için _table_query_url tercihi kullanılır. Sorgu yenileme aralığını (saniye cinsinden) ayarlamak için _table_query_refresh_interval tercihi kullanılır.
validateResponse(response)	Boole	Statik. response parametresi google.visualization.QueryResponse türünde. Yanıt veri içeriyorsa true değerini döndürür. Sorgu yürütülemediyse ve yanıt veri içermiyorsa false değerini döndürür. Hata oluşursa bu yöntem bir hata mesajı gösterir.

Sorgu Sınıfları

Aşağıdaki nesneler, Google E-Tabloları gibi harici bir veri kaynağına veri sorgularını göndermek için kullanılabilir.

• Sorgu: Giden veri isteğini sarmalar.
• QueryResponse: Veri kaynağından gelen yanıtı işler.

Sorgu

Bir veri kaynağına gönderilen sorguyu temsil eder.

Marka

google.visualization.Query(dataSourceUrl, opt_options)

Parametreler

dataSourceUrl

[Zorunlu, Dize] Sorgunun gönderileceği URL. Google E-tablolar için Grafikler ve E-tablolar belgelerini inceleyin.

opt_options

[İsteğe bağlı, Nesne] İstekle ilgili seçeneklerin bir haritası. Not: Kısıtlanmış bir veri kaynağına erişiyorsanız bu parametreyi kullanmamalısınız. Desteklenen özellikler şunlardır:

• sendMethod - [İsteğe bağlı, Dize] Sorguyu göndermek için kullanılacak yöntemi belirtir. Aşağıdaki dize değerlerinden birini seçin:
  • "xhr" - Sorguyu XmlHttpRequest kullanarak gönderin.
  • 'scriptInjection' - Sorguyu komut dosyası yerleştirmeyi kullanarak gönderin.
  • 'makeRequest' - [Yalnızca kullanımdan kaldırılmış olan cihazlar için kullanılabilir] Sorguyu, Gadget API'si makeRequest() yöntemini kullanarak gönderin. Belirtilirse makeRequestParams değerini de belirtmeniz gerekir.
  • 'auto': Veri kaynağı URL'sindeki tqrt URL parametresi tarafından belirtilen yöntemi kullanın. tqrt şu değerleri içerebilir: "xhr", "scriptInjection" veya "makeRequest". tqrt eksikse veya geçersiz bir değere sahipse varsayılan olarak aynı alan adına yönelik istekler için "xhr", web alanları arası istekler için "scriptInjection" kullanılır.
• makeRequestParams - [Object] makeRequest() sorgusu için parametre eşlemesi. Yalnızca sendMethod "makeRequest" ise kullanılır ve gereklidir.

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
abort()	Yok	setRefreshInterval() ile başlatılan otomatik sorgunun gönderilmesini durdurur.
setRefreshInterval(seconds)	Yok	Sorguyu, ilk açık çağrıdan send tarihine kadar belirtilen süre boyunca (saniye sayısı) otomatik olarak send yöntemini çağıracak şekilde ayarlar. seconds, sıfırdan büyük veya sıfıra eşit bir sayıdır. Bu yöntemi kullanırsanız send yöntemini çağırmadan önce çağırmanız gerekir. Bu yöntemi sıfır ile (varsayılan) tekrar çağırarak veya abort() yöntemini çağırarak iptal edin.
setTimeout(seconds)	Yok	Zaman aşımı hatası oluşturmadan önce veri kaynağının yanıt vermesi için beklenecek saniye sayısını belirler. seconds, sıfırdan büyük bir sayı. Varsayılan zaman aşımı süresi 30 saniyedir. Bu yöntem kullanılıyorsa send yöntemi çağrılmadan önce çağrılmalıdır.
setQuery(string)	Yok	Sorgu dizesini ayarlar. string parametresinin değeri geçerli bir sorgu olmalıdır. Bu yöntem kullanılıyorsa send yöntemi çağrılmadan önce çağrılmalıdır. Sorgu dili hakkında daha fazla bilgi edinin.
send(callback)	Yok	Sorguyu veri kaynağına gönderir. callback, veri kaynağı yanıt verdiğinde çağrılacak bir işlev olmalıdır. Geri çağırma işlevi, google.visualization.QueryResponse türünde tek bir parametre alır.

QueryResponse

Veri kaynağından alınan sorgu yürütme yanıtını temsil eder. Bu sınıfın bir örneği, Query.send çağrıldığında ayarlanan geri çağırma işlevine bağımsız değişken olarak aktarılır.

Yöntemler

Yöntem	Döndürülen Değer	Açıklama
getDataTable()	DataTable	Veri tablosunu veri kaynağının döndürdüğü şekliyle döndürür. Sorgu yürütülemediyse ve hiçbir veri döndürülmediyse null değerini döndürür.
getDetailedMessage()	Dize	Başarısız sorgular için ayrıntılı bir hata mesajı döndürür. Sorgu yürütme başarılıysa bu yöntem boş bir dize döndürür. Döndürülen mesaj, geliştiricilere yönelik bir mesajdır ve teknik bilgiler içerebilir. Örneğin, "{salary} sütunu mevcut değil".
getMessage()	Dize	Başarısız sorgular için kısa bir hata mesajı döndürür. Sorgu yürütme başarılıysa bu yöntem boş bir dize döndürür. Döndürülen mesaj, son kullanıcılara yönelik "Geçersiz Sorgu" veya "Erişim Reddedildi" gibi kısa bir mesajdır.
getReasons()	Dize dizisi	Daha fazla giriş içeren bir sıfır dizisi döndürür. Her giriş, sorgu yürütülürken hata veya uyarı kodu içeren kısa bir dizedir. Olası kodlar: access_denied Kullanıcının veri kaynağına erişim izni yok. invalid_query Belirtilen sorguda söz dizimi hatası var. data_truncated Sorgu seçimiyle eşleşen bir veya daha fazla veri satırı, çıkış boyutu sınırları nedeniyle döndürülmedi. (uyarı). timeout Sorgu, beklenen süre içinde yanıt vermedi.
hasWarning()	Boole	Sorgu yürütmede uyarı mesajı varsa true değerini döndürür.
isError()	Boole	Sorgu yürütülemediyse ve yanıt herhangi bir veri tablosu içermiyorsa true değerini döndürür. Sorgu yürütme başarılıysa ve yanıt bir veri tablosu içeriyorsa <false> değerini döndürür.

Hata Ekranı

API, kullanıcılarınıza özel hata mesajları göstermenize yardımcı olacak çeşitli işlevler sunar. Bu işlevleri kullanmak için sayfada API'nin biçimlendirilmiş bir hata mesajı çizeceği bir kapsayıcı öğesi (genellikle bir <div>) sağlayın. Bu kapsayıcı, görselleştirme kapsayıcı öğesi veya yalnızca hatalar için kullanılan bir kapsayıcı olabilir. Görselleştirmenin içerdiği öğeyi belirtirseniz görselleştirmenin üzerinde hata mesajı gösterilir. Ardından hata mesajını göstermek veya kaldırmak için aşağıdan uygun işlevi çağırın.

Tüm işlevler google.visualization.errors ad alanındaki statik işlevlerdir.

Birçok görselleştirme bir hata etkinliği tetikleyebilir. Bu konuda daha fazla bilgi edinmek için aşağıdaki hata etkinliğine bakın.

Sorgu Sarmalayıcı Örneği içinde örnek bir özel hata görebilirsiniz.

İşlev	Döndürülen Değer	Açıklama
addError(container, message, opt_detailedMessage, opt_options)	Oluşturulan hata nesnesini tanımlayan dize kimliği değeri. Bu, sayfadaki benzersiz bir değerdir ve hatayı kaldırmak veya hatanın kapsayıcı öğesini bulmak için kullanılabilir.	Belirtilen sayfa öğesine, belirtilen metin ve biçimlendirmeyle birlikte bir hata görüntüleme bloğu ekler. container - Hata mesajının ekleneceği DOM öğesi. Kapsayıcı bulunamazsa işlev, JavaScript hatası verir. message - Gösterilecek dize mesajı. opt_detailedMessage: İsteğe bağlı ayrıntılı bir mesaj dizesi. Bu, varsayılan olarak fareyle üzerine gelinen metindir ancak aşağıda açıklanan opt_options.showInToolTip özelliğinden değiştirilebilir. opt_options - Mesaj için çeşitli görüntüleme seçeneklerini ayarlayan özelliklere sahip isteğe bağlı bir nesne. Aşağıdaki seçenekler desteklenir: showInTooltip - True (doğru) değerine sahip bir boole değeri, ayrıntılı mesajı yalnızca ipucu metni olarak, false ise kısa mesajdan sonra kapsayıcı gövdesindeki ayrıntılı mesajı gösterir. Varsayılan değer, doğru değeridir. type - Hata türünü açıklayan ve bu iletiye hangi CSS stillerinin uygulanması gerektiğini belirleyen bir dize. Desteklenen değerler "error" ve "uyarı"dır. Varsayılan değer "hata"dır. style: Hata mesajının stil dizesi. Bu stil, uyarı türüne (opt_options.type) uygulanan tüm stilleri geçersiz kılar. Örnek: 'background-color: #33ff99; padding: 2px;' Varsayılan değer boş bir dizedir. removable - Bir boole değeri; burada true (doğru), mesajın kullanıcının fare tıklaması ile kapatılabileceği anlamına gelir. Varsayılan değer false'tur.
addErrorFromQueryResponse(container, response)	Oluşturulan hata nesnesini tanımlayan dize kimliği değeri veya yanıt bir hata belirtmiyorsa null. Bu, sayfadaki benzersiz bir değerdir ve hatayı kaldırmak veya hatanın kapsayıcı öğesini bulmak için kullanılabilir.	Bu yönteme bir sorgu yanıtı ve hata mesajı kapsayıcısı iletin: Sorgu yanıtı bir sorgu hatası belirtiyorsa belirtilen sayfa öğesinde bir hata mesajı gösterir. Sorgu yanıtı null ise yöntem, JavaScript hatası verir. Hata görüntülemek için sorgu işleyicinize aldığınız QueryResponse'u bu mesaja iletin. Ayrıca, türe uygun ekranın stilini de ayarlar (hata veya uyarı, addError(opt_options.type) benzeri). container - Hata mesajının ekleneceği DOM öğesi. Kapsayıcı bulunamazsa işlev, JavaScript hatası verir. response - Sorgu işleyiciniz tarafından bir sorgu'ya yanıt olarak alınan QueryResponse nesnesi. Bu null ise yöntem bir JavaScript hatası verir.
removeError(id)	Boole: Hata kaldırıldıysa true, değilse false (yanlış) değerini alır.	Kimlikle belirtilen hatayı sayfadan kaldırır. id - addError() veya addErrorFromQueryResponse() kullanılarak oluşturulan bir hatanın dize kimliği.
removeAll(container)	Yok	Belirtilen kapsayıcıdaki tüm hata bloklarını kaldırır. Belirtilen kapsayıcı mevcut değilse bu işlem bir hataya neden olur. container: Kaldırılacak hata dizelerini içeren DOM öğesi. Kapsayıcı bulunamazsa işlev, JavaScript hatası verir.
getContainer(errorId)	Belirtilen hatayı içeren bir DOM öğesine veya bulunamadığında null olmasına dikkat edin.	errorID tarafından belirtilen hatayı içeren kapsayıcı öğesine bir herkese açık kullanıcı adı alır. errorId - addError() veya addErrorFromQueryResponse() kullanılarak oluşturulan bir hatanın dize kimliği.

Etkinlikler

Çoğu görselleştirme bir şey olduğunu belirtmek için etkinlikleri tetikler. Grafiğin bir kullanıcısı olarak, genellikle bu etkinlikleri dinlemek istersiniz. Kendi görselleştirmenizi kodluyorsanız bu tür etkinlikleri kendiniz de tetiklemek isteyebilirsiniz.

Aşağıdaki yöntemler, geliştiricilerin etkinlikleri dinlemesini, mevcut etkinlik işleyicileri kaldırmasını veya etkinlikleri bir görselleştirmenin içinden tetiklemesini sağlar.

• google.visualization.events.addListener() ve google.visualization.events.addOneTimeListener() etkinlikleri dinler.
• google.visualization.events.removeListener(), mevcut bir işleyiciyi kaldırır.
• google.visualization.events.removeAllListeners(), belirli bir grafiğin tüm işleyicilerini kaldırır
• google.visualization.events.trigger() bir etkinlik tetikler.

addListener()

Sayfanızda barındırılan bir görselleştirme tarafından tetiklenen etkinlikleri almak üzere kaydolmak için bu yöntemi çağırın. İşleme işlevine hangi etkinlik bağımsız değişkenlerinin (varsa) aktarılacağını belgelemeniz gerekir.

google.visualization.events.addListener(source_visualization,
  event_name, handling_function)

source_visualization

Kaynak görselleştirme örneğinin herkese açık kullanıcı adı.

event_name

Dinlenecek etkinliğin dize adı. Görselleştirme hangi etkinlikleri gönderdiğini belgelemelidir.

handling_function

source_Visualization event_name etkinliğini tetiklediğinde çağrılacak yerel JavaScript işlevinin adı. İşleme işlevi, etkinlik bağımsız değişkenlerini parametre olarak iletir.

İadeler

Yeni dinleyiciler için bir dinleyici işleyici. İşleyici, gerekirse google.visualization.events.removeListener() çağrısı yapılarak bu işleyiciyi kaldırmak için kullanılabilir.

Örnek

Seçim etkinliğini almak için kaydolmayla ilgili bir örnek aşağıda verilmiştir

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

addOneTimeListener()

addListener() ile aynıdır ancak yalnızca bir kez dinlenmesi gereken etkinlikler için tasarlanmıştır. Etkinliğin sonraki aşamaları, işleme işlevini çağırmaz.

Kullanışlı bir örnek: Her çekiliş, bir ready etkinliğinin tetiklenmesine neden olur. Kodunuzu yalnızca ilk ready yürütmesini istiyorsanız addListener yerine addOneTimeListener yönergesini tercih edin.

removeListener()

Mevcut bir etkinlik işleyicinin kaydını iptal etmek için bu yöntemi çağırın.

google.visualization.events.removeListener(listener_handler)

listener_handler

google.visualization.events.addListener() tarafından döndürüldüğü gibi, kaldırılacak işleyici işleyici.

removeAllListeners()

Belirli bir görselleştirme örneğinin tüm etkinlik işleyicilerinin kaydını iptal etmek için bu yöntemi çağırın.

google.visualization.events.removeAllListeners(source_visualization)

source_visualization

Tüm etkinlik işleyicilerin kaldırılması gereken kaynak görselleştirme örneği için bir herkese açık kullanıcı adı.

trigger()

Görselleştirme uygulayıcıları tarafından çağrılır. İsteğe bağlı bir ada ve değer grubuna sahip bir etkinliği tetiklemek için görselleştirmenizden bu yöntemi çağırın.

google.visualization.events.trigger(source_visualization, event_name,
  event_args)

source_visualization

Kaynak görselleştirme örneğinin herkese açık kullanıcı adı. Bu işlevi, gönderen görselleştirme tarafından tanımlanan bir yöntem içinden çağırıyorsanız this anahtar kelimesini iletmeniz yeterlidir.

event_name

Etkinliği çağırmak için kullanılan dize adı. İstediğiniz herhangi bir dize değerini seçebilirsiniz.

event_args

[isteğe bağlı] Alma yöntemine iletilecek ad/değer çiftlerinin bir eşlemesi. Örneğin: {message: "Merhaba!", puan: 10, ad: "Furkan"}. Herhangi bir etkinlik gerekli değilse null değerini iletebilirsiniz. Alıcı, bu parametre için null değerini kabul etmeye hazır olmalıdır.

Örnek

"select" yöntemi çağrıldığında "select" adlı bir yöntemi yayınlayan bir görselleştirme örneğini burada bulabilirsiniz. Herhangi bir değeri geri iletmez.

MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

Standart Görselleştirme Yöntemleri ve Özellikleri

Her görselleştirme, aşağıdaki zorunlu ve isteğe bağlı yöntem ve özellikleri sunmalıdır. Ancak bu standartları uygulamak için herhangi bir tür kontrolü olmadığını, bu nedenle her görselleştirmeyle ilgili dokümanları okumanız gerektiğini unutmayın.

• Oluşturucu
• draw()
• getAction() [isteğe bağlı]
• getSelection() [isteğe bağlı]
• removeAction() [isteğe bağlı]
• setAction() [isteğe bağlı]
• setSelection() [isteğe bağlı]

Not: Bu yöntemler görselleştirmenin ad alanındadır, google.Visualization ad alanında değildir.

Oluşturucu

Oluşturucu, görselleştirme sınıfınızın adına sahip olmalı ve bu sınıfın bir örneğini döndürmelidir.

visualization_class_name(dom_element)

dom_element

Görselleştirmenin yerleştirilmesi gereken DOM öğesine yönlendiren bir işaret.

Örnek

var org = new google.visualization.OrgChart(document.getElementById('org_div')); 

draw()

Görselleştirmeyi sayfada çizer. Perde arkasında bu, bir sunucudan grafik getirmek veya bağlantılı görselleştirme kodunu kullanarak sayfada grafiği oluşturmak olabilir. Veriler veya seçenekler her değiştiğinde bu yöntemi çağırmanız gerekir. Nesne, oluşturucuya iletilen DOM öğesinin içinde çizilmelidir.

draw(data[, options])

veriler

Grafiği çizmek için kullanılacak verileri tutan bir DataTable veya DataView. Grafikten DataTable çıkarmak için standart bir yöntem yoktur.

seçenekler

[İsteğe bağlı] Özel seçeneklerin ad/değer çiftlerinin haritası. Örnekler arasında yükseklik ve genişlik, arka plan renkleri ve altyazılar yer alır. Görselleştirme belgelerinde hangi seçeneklerin kullanılabildiği listelenmelidir ve bu parametreyi belirtmezseniz varsayılan seçenekleri desteklemelidir. Bir seçenek eşlemesini aktarmak için JavaScript nesnesi değişmez değer söz dizimini kullanabilirsiniz: ör. {x:100, y:200, title:'An Example'}

Örnek

chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

getAction()

Bu, isteğe bağlı olarak ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından gösterilir.

İstenen actionID içeren ipucu işlem nesnesini döndürür.

Örnek:

// Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

getSelection()

Bu bilgiler, grafikteki seçili olan verilere erişmenize olanak tanımak isteyen görselleştirmeler tarafından isteğe bağlı olarak gösterilir.

selection_array getSelection()

İadeler

selection_array Her biri, görselleştirmeyi oluşturmak için kullanılan temel tablodaki bir veri öğesini açıklayan seçili nesneler dizisi (DataView veya DataTable). Her nesne, row ve/veya column özelliklerine sahiptir ve seçilen öğenin temel DataTable içerisindeki satır ve/veya sütununun dizinini içerir. row özelliği null ise seçim bir sütundur; column özelliği null ise seçim bir satırdır; her ikisi de null değilse belirli bir veri öğesidir. Seçilen öğenin değerini almak için DataTable.getValue() yöntemini çağırabilirsiniz. Alınan dizi, setSelection() işlevine geçirilebilir.

Örnek

function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

removeAction()

Bu, isteğe bağlı olarak ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından gösterilir.

İstenen actionID değerini içeren ipucu işlemi nesnesini grafiğinizden kaldırır.

Örnek:

// Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

setAction()

Bu, isteğe bağlı olarak ipuçları içeren ve ipucu işlemlerine izin veren görselleştirmeler tarafından gösterilir. Yalnızca temel grafiklerde (çubuk, sütun, çizgi, alan, dağılım, karma, balon, pasta, halka, şamdan, histogram, basamaklı alan) çalışır.

Kullanıcı işlem metnini tıkladığında yürütülecek bir ipucu işlemi ayarlar.

setAction(action object)

setAction yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesne 3 özellik belirtmelidir: id - ayarlanan işlemin kimliği, text —işleme ilişkin ipucunda görünmesi gereken metin ve action - kullanıcı işlem metnini tıkladığında çalıştırılması gereken işlev.

Tüm ipucu işlemleri, grafiğin draw() yöntemi çağrılmadan önce ayarlanmalıdır.

Örnek:

// Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

setAction yöntemi ayrıca iki ek özellik de tanımlayabilir: visible ve enabled. Bu özellikler, ipucu işleminin görünür ve/veya etkin olup olmayacağını belirten boolean değerlerini döndüren işlevler olmalıdır.

Örnek:

// The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

setSelection()

İsteğe bağlı olarak görselleştirmedeki bir veri girişini seçer; örneğin, alan grafiğindeki bir nokta veya çubuk grafikteki bir çubuk. Bu yöntem çağrıldığında, görselleştirme yeni seçimin ne olduğunu görsel olarak belirtmelidir. setSelection() uygulanması, bir "select" etkinliğini tetiklememelidir. Görselleştirmeler seçimin bir kısmını yok sayabilir. Örneğin, yalnızca seçili satırları gösterebilen bir tablo, setSelection() uygulamasındaki hücre veya sütun öğelerini yoksayabilir veya tüm satırı seçebilir.

Bu yöntem her çağrıldığında, seçilen tüm öğelerin seçimi kaldırılır ve iletilen yeni seçim listesi uygulanır. Tek tek öğelerin seçimini kaldırmak için açık bir yöntem yoktur; tek tek öğelerin seçimini kaldırmak için, seçili kalması için öğelerle birlikte setSelection() yöntemini, tüm öğelerin seçimini kaldırmak için setSelection(), setSelection(null) veya setSelection([]) yöntemini çağırın.

setSelection(selection_array)

selection_array

Her biri sayısal satır ve/veya sütun özelliğine sahip bir nesne dizisi. row ve column, veri tablosundaki seçilecek öğenin sıfır tabanlı satır veya sütun numarasıdır. Sütunun tamamını seçmek için row değerini null, tüm satırı seçmek için column değerini null olarak ayarlayın. Örnek: setSelection([{row:0,column:1},{row:1, column:null}]), (0,1) noktasındaki hücreyi ve 1. satırın tamamını seçer.

Çeşitli Statik Yöntemler

Bu bölümde, google.visualization ad alanında gösterilen çeşitli faydalı yöntemler yer almaktadır.

arrayToDataTable()

Bu yöntem iki boyutlu bir diziyi alır ve bunu bir DataTable'a dönüştürür.

Sütun veri türleri, sağlanan verilere göre otomatik olarak belirlenir. Sütun veri türleri, dizinin ilk satırındaki (sütun başlığı satırı) nesne değişmez değeri gösterimi kullanılarak da belirtilebilir (ör. {label: 'Start Date', type: 'date'}). İsteğe bağlı veri rolleri de kullanılabilir ancak nesne değişmez değer gösterimi kullanılarak açıkça tanımlanmalıdır. Nesne değişmez değeri gösterimi herhangi bir hücre için de kullanılabilir. Böylece Hücre Nesneleri'ni tanımlayabilirsiniz.

Söz dizimi

google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)

twoDArray

Her satırın, veri tablosundaki bir satırı temsil ettiği iki boyutlu dizi. opt_firstRowIsData değeri false (varsayılan) ise ilk satır, başlık etiketleri olarak yorumlanır. Her sütunun veri türleri, verilen verilerden otomatik olarak yorumlanır. Bir hücrede değer yoksa, uygun şekilde null veya boş bir değer belirtin.

opt_firstRowIsData

İlk satırın bir başlık satırı tanımlayıp tanımlamadığını belirtir. Değer true ise tüm satırların veri olduğu varsayılır. Yanlış değerine ayarlanırsa ilk satırın başlık satırı olduğu varsayılır ve değerler sütun etiketleri olarak atanır. Varsayılan değer, false'tur.

İadeler

Yeni bir DataTable.

Örnekler

Aşağıdaki kod, aynı DataTable nesnesini oluşturmanın üç yolunu göstermektedir:

// Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

drawChart()

Bu yöntem, tek bir çağrıda bir grafik oluşturur. Bu yöntemi kullanmanın avantajı, biraz daha az kod gerektirmesidir. Ayrıca, görselleştirmeleri serileştirip yeniden kullanım için metin dizeleri olarak kaydedebilirsiniz. Bu yöntem, oluşturulan grafiğe bir herkese açık kullanıcı adı döndürmez. Bu nedenle, grafik etkinliklerini yakalamak için yöntem işleyiciler atayamazsınız.

Söz dizimi

google.visualization.drawChart(chart_JSON_or_object)

chart_JSON_or_object

Aşağıdaki özelliklere (büyük/küçük harfe duyarlı) sahip bir JSON düz dizesi veya bir JavaScript nesnesi:

Özellik	Tür	Gerekli	Varsayılan	Açıklama
chartType	Dize	Gerekli	yok	Görselleştirmenin sınıf adı. google.visualization paket adı, Google grafiklerine atlanabilir. Uygun görselleştirme kitaplığı önceden yüklenmediyse ve bu bir Google görselleştirmesiyse bu yöntem, kitaplığı sizin için yükler. Üçüncü taraf görselleştirmelerini açık bir şekilde yüklemeniz gerekir. Örnekler: Table, PieChart, example.com.CrazyChart.
containerId	Dize	Gerekli	yok	Sayfanızda görselleştirmeyi barındıracak DOM öğesinin kimliği.
seçenekler	Nesne	İsteğe bağlı	yok	Görselleştirme seçeneklerini açıklayan bir nesne. JavaScript değişmez değer gösterimini kullanabilir veya nesneye bir herkese açık kullanıcı adı sağlayabilirsiniz. Örnek: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
dataTable	Nesne	İsteğe bağlı	Yok	Görselleştirmeyi doldurmak için kullanılan DataTable. Bu, yukarıda açıklandığı gibi bir DataTable'ın düz JSON dizesi temsili, doldurulmuş google.visualization.DataTable nesnesinin herkese açık kullanıcı adı ya da arrayToDataTable(opt_firstRowIsData=false) tarafından kabul edilen gibi 2 boyutlu bir dizi olabilir. Bu özelliği veya dataSourceUrl özelliğini belirtmeniz gerekir.
dataSourceUrl	Dize	İsteğe bağlı	Yok	Grafik verilerini dolduracak bir veri kaynağı sorgusu (ör. Google E-Tablosu). Bu özelliği veya dataTable özelliğini belirtmeniz gerekir.
sorgu	Dize	İsteğe bağlı	Yok	dataSourceUrl belirtiyorsanız verileri filtrelemek veya değiştirmek için Görselleştirme sorgu dilini kullanarak isteğe bağlı olarak SQL benzeri bir sorgu dizesi belirtebilirsiniz.
refreshInterval	Sayı	İsteğe bağlı	Yok	Görselin ne sıklıkta (saniye cinsinden) sorgu kaynağını yenilemesi gerektiği. Bunu yalnızca dataSourceUrl belirtirken kullanın.
görüntüleme	Nesne VEYA Dizi	İsteğe bağlı	Yok	dataTable veya dataSourceUrl parametresiyle tanımlandığı şekilde, temel veriler üzerinde filtre işlevi gören bir DataView başlatıcı nesnesi ayarlar. Bir dize veya dataview.toJSON() tarafından döndürülen DataView başlatıcı nesnesini aktarabilirsiniz. Örnek: "view": {"columns": [1, 2]} Ayrıca, DataView başlatıcı nesnesi dizisi de aktarabilirsiniz. Bu durumda, dizideki ilk DataView yeni bir veri tablosu oluşturmak için temel verilere uygulanır ve ikinci DataView ilk DataView uygulamasından elde edilen veri tablosuna uygulanır ve bu böyle devam eder.

Örnekler

E-tablo veri kaynağını temel alarak bir tablo grafiği oluşturur ve SELECT A,D WHERE D > 100 ORDER BY D sorgusunu içerir

<script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

Aşağıdaki örnek, aynı tabloyu oluşturur, ancak yerel olarak bir DataTable oluşturur:

<script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

Bu örnek, grafiği bir dosyadan yüklemiş olabileceğiniz JSON dizesi gösterimini verir:

<script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

drawToolbar()

Bu, birçok görselleştirmeye eklenebilecek araç çubuğu öğesinin oluşturucusudur. Bu araç çubuğu, kullanıcının görselleştirme verilerini farklı biçimlerde dışa aktarmasına veya farklı yerlerde kullanılmak üzere görselleştirmenin yerleştirilebilir bir sürümünü sağlamasına olanak tanır. Daha fazla bilgi ve bir kod örneği için araç çubuğu sayfasına bakın.