ev borcu WordPress sitesi
Google Charts – Bir sonraki analiz projeniz için nasıl kullanılır?
Google Grafiklerine ve örneklerine girmeden önce, çizelgelerin ne olduğunu ve nasıl yararlı olduğunu bilmekte fayda var.
“Bir resim bin kelimeye bedeldir”, karmaşık bir şeyin/fikrin tek bir hareketsiz resimle kolayca aktarılabileceği anlamına gelir. Grafikler de aynı şekilde kullanılabilir, burada metin ve sayılarla açıklamak için sayfalar alabileceği tek bir kutu ile bilgi aktarmaya yardımcı olabilir.
çizelge nedir?
Bir grafik grafiği, verilerin grafiksel temsilidir ve başka bir şey değildir. Verileri sunarken ve açıklarken düşünün. Tabloları rakamlar, sayılar, yüzdeler ve ilişkilerle gösterebilirsiniz. Ancak, yalnızca bunlara güvenirseniz, puanınızın kaybedilmesi ihtimali vardır.
Ancak bir çizelge veya grafik kullanırsanız, her şey birden bire anlam kazanacaktır çünkü çizelgelerin kendisi bilgiyi daha kolay bir şekilde tanımlayabilir. Verilerin kolay ve hızlı bir şekilde anlaşılmasına yardımcı olur.
Mevcut birçok çizelge/grafik türü olduğundan, bilgileri tablo kullanarak göstermeye karar vermek de yeterli değildir. Kitlenizle/halklarınızla paylaşmak istediğiniz bilgiler için ne tür bir grafiğin uygun olacağına da karar vermelisiniz. Birkaç yaygın çizelge şunlardır:
- Alan grafiği
- Grafik çubuğu
- Kabarcık grafiği
- Yuvarlak diyagram
- Sütun grafiği
- Çizgi grafik
- Fark grafiği
- Tablo grafiği
Google Grafikleri
Hizmetlerini kullanarak web sitenizdeki bilgileri görselleştirmenin daha kolay bir yolunu sunar. Google, basit çizgi grafiklerden karmaşık ağaç haritalarına kadar çok çeşitli grafikler sunmaktadır. Analitik proje üzerinde çalışıyorsanız ve zengin grafik sistemi kullanarak büyük bilgileri/verileri göstermek istiyorsanız, Google grafikleri en iyi seçenektir. Google çizelgeleri, güçlü bir grafik aracıdır, ancak uygulanması çok kolaydır.
JavaScript API'lerini kullanarak nasıl entegre edileceğine ilişkin ayrıntıları içeren genel çizelgelerin listesi burada.
1. Çubuk Grafik (Google Grafikler'deki çubuk grafiğe bakın)
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['Source', 'Percentage', {role: 'style'}],
['Services', 50, '#b87333'], // RGB value
['Mobiles', 20, 'silver'], // English color name
['Computers', 20, 'gold'],
['Others', 10, 'color: #e5e4e2'], // CSS-style declaration
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2]);
var options = {
title: "Company Sales",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: {position: "none"},
};
var chart = new google.visualization.BarChart(
document.getElementById("bar_chart_div"));
chart.draw(view, options);
}
2. Pasta Grafiği (Google Charts'ta pasta grafiğine bakın)
function drawPieChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Source');
data.addColumn('number', 'Percentage');
data.addRows([
['Services', 50],
['Mobiles', 20],
['Computers', 20],
['Others', 10],
]);
// Set chart options
var options = {'title': 'Company Sales',
'width': 400,
'height': 300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(
document.getElementById('pie_chart_div'));
chart.draw(data, options);
}
3. Sütun Grafiği (Google Charts'taki sütun grafiğine bakın)
function drawColumnChart() {
var data = google.visualization.arrayToDataTable([
['Source', 'Percentage', {role: 'style'}],
['Services', 50, '#b87333'], // RGB value
['Mobiles', 20, 'silver'], // English color name
['Computers', 20, 'gold'],
['Others', 10, 'color: #e5e4e2'], // CSS-style declaration
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2]);
var options = {
title: "Company Sales",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: {position: "none"},
};
var chart = new google.visualization.ColumnChart(
document.getElementById("column_chart_div"));
chart.draw(view, options);
}
4. Çizgi Grafiği (Google Charts'taki çizgi grafiğine bakın)
function drawLineChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
width: 600,
height: 400,
title: 'Company Performance',
curveType: 'function',
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(
document.getElementById('line_chart_div'));
chart.draw(data, options);
}
5. Kabarcık Grafiği (Google Grafiklerinde balon grafiğine bakın)
function drawBubbleChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
title: 'Temperature Bubble Chart',
width: 600,
height: 400,
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(
document.getElementById('bubble_chart_div'));
chart.draw(data, options);
}
6. Donut Grafiği (Google Charts'taki halka grafiğine bakın)
function drawDonutChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Source');
data.addColumn('number', 'Percentage');
data.addRows([
['Services', 50],
['Mobiles', 20],
['Computers', 20],
['Others', 10],
]);
var options = {'title': 'Company Sales',
'width': 400,
'height': 300,
pieHole: 0.4,
};
var chart = new google.visualization.PieChart(
document.getElementById('donut_chart_div'));
chart.draw(data, options);
}
7. Tablo Grafiği (Google Charts'taki tablo grafiğine bakın)
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Source');
data.addColumn('number', 'Percentage');
data.addColumn('string', 'Year');
data.addRows([
['Services', {v: 50, f: '50%'}, '2015'],
['Mobiles', {v: 20, f: '20%'}, '2015'],
['Computers', {v: 20, f: '20%'}, '2015'],
['Others', {v: 10, f: '10%'}, '2015'],
['Services', {v: 40, f: '40%'}, '2014'],
['Mobiles', {v: 30, f: '30%'}, '2014'],
['Computers', {v: 10, f: '10%'}, '2014'],
['Others', {v: 20, f: '20%'}, '2014'],
]);
var table = new google.visualization.Table(
document.getElementById('table_chart_div'));
table.draw(data, {showRowNumber: true, width: '50%', height: '50%'});
}
8. Şamdan – Şelale Tablosu (Google Listelerinde şelale grafiğine bakın)
function drawCandlestickChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 28, 28, 38, 38],
['Tue', 38, 38, 55, 55],
['Wed', 55, 55, 77, 77],
['Thu', 77, 77, 66, 66],
['Fri', 66, 66, 22, 22]
], true);
var options = {
legend: 'none',
'width': 400,
'height': 300,
bar: {groupWidth: '100%'}, // Remove space between bars.
candlestick: {
fallingColor: {strokeWidth: 0, fill: '#a52714'}, // red
risingColor: {strokeWidth: 0, fill: '#0f9d58'} // green
}
};
var chart = new google.visualization.CandlestickChart(
document.getElementById('candlestick_chart_div'));
chart.draw(data, options);
}
9. Histogram Grafiği (Google Charts'taki histogram grafiğine bakın)
function drawHistogramChart() {
var data = google.visualization.arrayToDataTable([
['Source', 'Percentage'],
['Computers', 15],
['Mobiles', 5],
['Services', 25],
['Call Centers', 35],
['Market', 5],
['Advertisements', 5],
['Others', 10],
]);
var options = {
title: 'Company Sales',
'width': 400,
'height': 300,
legend: {position: 'none'},
};
var chart = new google.visualization.Histogram(
document.getElementById('histogram_chart_div'));
chart.draw(data, options);
}
10. WordTree Grafiği (Google Charts'ta wordtree grafiğine bakın)
Ağırlıklı WordTree görünümü 
function drawWordTree() {
var data = google.visualization.arrayToDataTable(
[['Phrases'],
['JavaScript is language'],
['JavaScript is scripting language'],
['JavaScript is popular'],
['JavaScript is client side scripting language'],
['JavaScript is base of jQuery'],
['JavaScript is base of Prototype'],
['JavaScript is base of Angular'],
['JavaScript is base of Backbone'],
]
);
var options = {
wordtree: {
format: 'implicit',
word: 'JavaScript'
}
};
var chart = new google.visualization.WordTree(
document.getElementById('wordtree_chart_div'));
chart.draw(data, options);
}
Yukarıda gösterilen çizelgeler için tam kaynak kodunu indirin: Kaynağı İndirin
Ayrıca bu çizelgelerin çoğunu kullanarak bir WordPress eklentisi yazdım. Blogunuza grafikler yerleştiren ve blog, kategori, sayfa, yorum, etiket, kullanıcı ve CPT ile ilgili kullanımı ve sayıları gösteren basit bir WordPress eklentisidir. Bu eklenti, blogunuzun tüm bu öğeleri nasıl kullandığını görmenizi sağlar. Pasta Grafiği, Google Sütun Grafikleri ve Google Tablosu dahil olmak üzere Google Sohbetleri kullanılarak gösterilen tüm istatistikler.
Eklenti URL'si: WP İstatistikleri Göster – WordPress yöneticisi için kişisel kontrol paneli
Daha fazla bilgi: WP İstatistikleri Göster – Özellikler ve kullanım kılavuzu
Farklı gereksinimlere göre kullanılabilecek birçok başka çizelge de vardır. Google Charts için diğer demolar ve belgeler için faydalı bağlantıların listesi burada.
Google Grafikleri için faydalı bağlantılar
Grafikler: https://developers.google.com/chart/
Demolar: https://developers.google.com/chart/interactive/docs/gallery
Google grafikleri Geliştirme API'si referansı: https://developers.google.com/chart/interactive/docs/reference
Grafikler Forumu: https://groups.google.com/forum/#!forum/google-visualization-api
Herhangi bir yardıma ihtiyacınız varsa veya çizelgeleri uygulamada sorun yaşıyorsanız lütfen yorum ekleyin veya bana bir e-posta bırakın.