Google Grafikleri – Bir sonraki analitik projeniz için nasıl kullanılacağınız

Google grafiklerine girmeden önce ve örneğin, grafiklerin ne olduğunu ve nasıl yararlı olduklarını bulmak iyidir. “Bin kelimeye değer bir görüntü”, karmaşık şeyler/fikirlerin sadece bir sabit resimle kolayca aktarılabileceği anlamına gelir. Grafik aynı şekilde kullanılabilir, burada bilgiyi metin ve sayılarla açıklanacak şekilde alabileceği yalnızca bir kutu ile iletilmeye yardımcı olabilir. Grafik nedir? Grafik grafik verilerin grafik temsilidir ve başka bir şey değildir. Verileri sunduğunuzda ve açıkladığınızda düşünün. Tabloları sayılar, sayılar, yüzdesi ve ilişki ile görüntüleyebilirsiniz. Ancak, buna güvenirseniz puanlarınızın olasılığı ortadan kalkacaktır.
Ancak bir grafik veya grafik kullanırsanız, her şey aniden mantıklı olacaktır, çünkü grafiğin kendisi bilgileri daha kolay bir şekilde tanımlayabilir. Bu, verilerin kolay ve hızlı bir şekilde anlaşılmasına yardımcı olur. Grafikleri kullanarak bilgileri görüntülemeye karar vermek de yeterli değildir, çünkü birçok grafik/grafik türü vardır. Ayrıca, kitleniz/topluluğunuzla paylaşmak istediğiniz bilgiler için ne tür bir grafiğin uygun olduğuna karar vermelisiniz. Bazı genel grafikler:
Alan grafiği
Grafik çubuğu
Kabarcık çizelgesi
Yuvarlak diyagram
Sütun grafiği
Çizgi grafik
Fark çizelgesi
Tablo grafiği
Google grafikleri, hizmetlerini kullanarak web sitenizdeki bilgileri görselleştirmenin daha kolay bir yolunu sunar. Google, basit çizgi grafiklerinden karmaşık ağaç haritalarına kadar çeşitli grafikler sağlar. Analitik projeler üzerinde çalışıyorsanız ve zengin bir grafik sistemi kullanarak büyük bilgiler/veriler görüntülemeyi seviyorsanız, Google’ın grafiği en iyi seçimdir. Google grafikleri güçlüdür, ancak grafiklerin uygulanması çok kolaydır. Aşağıda, JavaScript API’larını kullanarak nasıl entegre edileceğine dair ayrıntılar içeren genel grafiklerin bir listesi bulunmaktadır. 1. Çubuk grafik (Google grafiklerindeki Batang Diyagramına bakın)
Google Grafikler – Battalfunction DrawBarchart ()

// Veri tablosunu oluşturun.
var data = yeni google.visualization.datatable ();
data.addcolumn (‘String’, ‘kaynak’);
data.addcolumn (‘sayı’, ‘yüzde’);
data.addrows ([
[‘Hizmetler’, 50],
[‘Cep telefonları’, 20],
[‘Bilgisayarlar’, 20],
[‘Diğerleri’, 10],
]);
// grafik seçeneklerini ayarlayın
var options = {‘başlık’: ‘Şirket satışları’,
‘Genişlik’: 400,
‘Yükseklik’: 300};
// Bazı seçenekleri geçerek grafiğimizi oluşturun ve çizin.
var grafik = yeni google.visualization.piechart (
Document.getElementById (‘pie_chart_div’)));
chart.draw (veri, seçenekler);
}
3. Sütun Grafiği (Google grafiklerindeki sütun çizelgesine bakın)
Google Grafikler – Colomfunction DrawColumnchart () ColomFunction Grafiği {

var data = google.visualization.arraytodatable ([
[‘İd’, ‘x’, ‘y’, ‘sıcaklık’],
[”, 80, 167, 120],
[”, 79, 136, 130],
[”, 78, 184, 50],
[”, 72, 278, 230],
[”, 81, 200, 210],
[”, 72, 170, 100],
[”, 68, 477, 80]
]);
Var seçenekleri = {
Başlık: ‘Sıcaklık Kabarcık Grafiği’,
Genişlik: 600,
Yükseklik: 400,
Coloraxis: {renkler: [‘sarı’, ‘kırmızı’]}
};
var grafik = yeni google.visualization.bubbleChart (
Document.getElementById (‘Bubble_chart_div’)));
chart.draw (veri, seçenekler);
}
6. Donut grafiği (Google grafiklerindeki donut grafiğine bakın)

Google Grafikler – Donatfunction DrawDonutchart () DonatFunction Grafiği {

var data = yeni google.visualization.datatable ();
data.addcolumn (‘String’, ‘kaynak’);
data.addcolumn (‘sayı’, ‘yüzde’);
data.addrows ([
[‘Hizmetler’, 50],
[‘Cep telefonları’, 20],
[‘Bilgisayarlar’, 20],
[‘Diğerleri’, 10],
]);
var options = {‘başlık’: ‘Şirket satışları’,
‘Genişlik’: 400,
‘Yükseklik’: 300,
Piehole: 0.4,
};
var grafik = yeni google.visualization.piechart (
Document.getElementById (‘Donut_chart_div’)));
chart.draw (veri, seçenekler);
}
7. Grafik tabloları (Google grafiklerindeki tablolara bakın)
Google Grafikleri – Tablo

Function drawtable () {
var data = yeni google.visualization.datatable ();
data.addcolumn (‘String’, ‘kaynak’);
data.addcolumn (‘sayı’, ‘yüzde’);
data.addcolumn (‘String’, ‘yıl’);
data.addrows ([
[‘Hizmetler’, {V: 50, F: ‘%50’}, ‘2015’],
[‘Mobil’, {v: 20, f: ‘20%’},’ 2015 ‘],
[‘Bilgisayarlar’, {V: 20, F: ‘20%’},’ 2015 ‘],
[‘Diğerleri’, {V: 10, F: ‘10%’},’ 2015 ‘],
[‘Hizmetler’, {V: 40, F: ‘40%’},’ 2014 ‘],
[‘Mobil’, {v: 30, f: ‘30%’}, ‘2014’],
[‘Bilgisayarlar’, {V: 10, F: ‘10%’},’ 2014 ‘], [‘ Diğerleri ‘, {V: 20, F: ‘20%’}, ‘2014’],
]);
Var tablo = yeni google.visualization.table (
Document.getElementById (‘table_chart_div’)));
table.draw (veri, {gösterilen kaynak: true, genişlik: ‘%50’, yükseklik: ‘%50’});
}
8. Candlestick – Şelale Grafiği (Google grafiklerinde şelale grafiğine bakın)
Google Grafikler – Candlestick – DrawCandLestickChart () {
var data = google.visualization.arraytodatable ([

[‘Pzt’, 28, 28, 38, 38],
[‘Sal’, 38, 38, 55, 55],
[‘Çar’, 55, 55, 77, 77],
[‘Per’, 77, 77, 66, 66],
[‘Cum’, 66, 66, 22, 22]
], doğru);
Var seçenekleri = {
Efsane: ‘Yok’,
‘Genişlik’: 400,
‘Yükseklik’: 300,
Bar: {Groupwidth: ‘%100’}, // çubuklar arasındaki boşluğu çıkarın.
Candlestick: {
FallingColor: {StokeWidth: 0, doldurun: ‘#a52714’}, // kırmızı
RisingColor: {Stokewidth: 0, doldurun: ‘#0f9d58’} // yeşil
}
};
var grafik = yeni google.visualization.candlestickchart (
document.getElementById (‘Candlestick_chart_div’)));
chart.draw (veri, seçenekler);
}
9. Histogram grafiği (Google grafiklerindeki histogram grafiğine bakın)
HistogramFunction Drawhistogram grafiği () {
var data = google.visualization.arraytodatable ([

[‘Kaynak’, ‘yüzde’],
[‘Bilgisayarlar’, 15],
[‘Cep telefonları’, 5],
[‘Hizmetler’, 25],
[‘Çağrı Merkezleri’, 35],
[‘Pazar’, 5],
[‘Reklamlar’, 5],
[‘Diğerleri’, 10],
]);
Var seçenekleri = {
Başlık: ‘Şirket satışları’,
‘Genişlik’: 400,
‘Yükseklik’: 300,
Efsane: {pozisyon: ‘yok’},
};
var grafik = yeni google.visualization.histogram (
Document.getElementById (‘histogram_chart_div’)));
chart.draw (veri, seçenekler);
}
10. WordTree grafiği (Google grafiklerindeki WordTree grafiklerine bakın)
WordTree ekranı ağır
Function drawwordTree () {

var data = google.visualization.arrayTodatable (

[[‘İfadeler’], [‘JavaScript dil’],
[‘JavaScript komut dosyası dilidir’],
[‘JavaScript popüler’],
[‘JavaScript müşteri tarafı komut dosyası dilidir’],
[‘Javascript JQuery’nin Temeli’],
[‘JavaScript prototipin temelini oluşturur’],
[‘JavaScript açısalın temelini oluşturur’],
[‘JavaScript omurganın temelini oluşturur’],
]
);
Var seçenekleri = {
WordTree: {
Biçim: ‘Örtük’,
Kelime: ‘JavaScript’
}
};
var grafik = yeni google.visualization.wordtree (
Document.getElementById (‘wordtree_chart_div’));
chart.draw (veri, seçenekler);
}

Google Grafikleri - Bir sonraki analitik projeniz için nasıl kullanılacağınız