<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ına sarmalanmasını gerektirir. Bu sınıf, daha önce yüklediğiniz Google Görselleştirme kitaplığında tanımlanmıştır.
DataTable, satır ve sütunlar içeren iki boyutlu bir tablodur. Her sütunda bir veri türü, isteğe bağlı bir kimlik ve isteğe bağlı bir etiket bulunur. Yukarıdaki örnek aşağıdaki tabloyu oluşturur:
| type: string label: Üstü |
type: sayı label: Dilimler |
|---|---|
| Mantarlar | 3 |
| Soğanlar | 1 |
| Zeytinler | 1 |
| Kabak | 1 |
| Pepperoni | 2 |
DataTable oluşturmanın birkaç yolu vardır. Her tekniğin listesini ve karşılaştırmasını DataTables ve DataView'da görebilirsiniz. Verilerinizi ekledikten sonra değiştirebilir, sütun ve satır ekleyebilir, düzenleyebilir veya kaldırabilirsiniz.
Grafiğinizin DataTable öğesini grafiğin beklediği biçimde düzenlemeniz gerekir: Örneğin, hem Çubuk hem de Pasta grafikler için her satırın bir dilimi veya çubuğu temsil ettiği iki sütunlu bir tablo gerekir. İlk sütun dilim veya çubuk etiketi, ikinci sütun ise dilim veya çubuk değerini içerir. 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ü destekleyen bir web sitesini (örneğin, bir Google E-Tablolar sayfası) sorgulayabilirsiniz. google.visualization.Query nesnesini kullanarak bir web sitesine sorgu gönderebilir ve grafiğinize iletebileceğiniz doldurulmuş bir DataTable nesnesi alabilirsiniz. Nasıl sorgu göndereceğinizi öğrenmek için Veri Kaynağı Sorgulama ileri düzey konusunu inceleyin.