<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
DataTable oluşturun
Tüm grafikler için veri gerekir. Google Grafik Araçları grafikleri, verilerin google.visualization.DataTable adlı bir JavaScript sınıfında sarmalanmasını gerektirir. Bu sınıf, daha önce yüklediğiniz Google
Görselleştirme kitaplığında tanımlanır.
DataTable, her bir veri türünün, isteğe bağlı bir kimliğin ve isteğe bağlı bir etiketin bulunduğu, satırlar ve sütunlar içeren iki boyutlu bir tablodur. Yukarıdaki örnek aşağıdaki tabloyu oluşturur:
| type: dize label: Dolgu |
type: number label: Dilimler |
|---|---|
| Mantar | 3 |
| Soğan | 1 |
| Zeytin | 1 |
| Kabak | 1 |
| Pepperoni | 2 |
DataTable oluşturmanın birkaç yolu vardır. DataTables ve DataViews'da her tekniğin listesini ve karşılaştırmasını görebilirsiniz. Verilerinizi ekledikten sonra değiştirebilir ve sütun ve satır ekleyebilir, düzenleyebilir veya kaldırabilirsiniz.
Grafiğinizdeki DataTable öğesini, grafiğin beklediği biçimde düzenlemelisiniz: Örneğin, hem Çubuk hem de Pasta grafikler, her satırın bir dilimi veya çubuğu temsil ettiği iki sütunlu bir tablo gerektirir. İlk sütun, dilim veya çubuk etiketi, ikinci sütun ise dilim veya çubuk değeridir. Diğer grafikler farklı ve muhtemelen daha karmaşık tablo biçimleri gerektirir. Gerekli veri biçimini öğrenmek için grafiğinizin dokümanlarına bakın.
Bir tabloyu kendiniz doldurmak yerine, Grafik Araçları Veri Kaynağı protokolünü (örneğin, bir Google E-tablolar sayfası) destekleyen bir web sitesini sorgulayabilirsiniz. google.visualization.Query nesnesini kullanarak bir web sitesine sorgu gönderebilir ve grafiğinize iletebileceğiniz, doldurulmuş bir DataTable nesnesi alabilirsiniz. Nasıl veri göndereceğinizi öğrenmek için Veri Kaynağını Sorgulama başlıklı ileri düzey konuya bakın.