Grafiğinizi doldurmak üzere veriler almak için sunucu tarafı kodu kullanabilirsiniz. Sunucu tarafı kodunuz yerel bir dosyayı yükleyebilir, veritabanını sorgulayabilir veya verileri başka bir yöntemle alabilir. Aşağıdaki PHP örneği, bir sayfa istendiğinde yerel metin dosyasından alınan grafik verilerini göstermektedir. PHP'yi destekliyorsa bu dosyaları kendi sunucunuza kopyalayabilirsiniz.
Not: Bu örnek, jQuery 1.6.2 veya sonraki sürümleri gerektirir.
examplePHP.html dosyasını kullanma
Bu, kullanıcının göz attığı dosyadır. çizim grafiği() işlevi, URL'ye sorgu göndermek ve JSON dizesine geri dönmek için jQuery ajax() işlevini çağırır. Buradaki URL, getget.pdf dosyasını içerir. Döndürülen veriler aslında yerel sampleData.json dosyasında tanımlanan bir DataTable'dir. Bu DataTable, daha sonra sayfada oluşturulan bir pasta grafiğin doldurulması için kullanılır.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.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);
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
getData.csv Dosyası
Bu dosya bir istek aldığında, yerel sampleData.json dosyasının bir kopyasını döndürür.
<?php
// This is just an example of reading server side data and sending it to the client.
// It reads a json formatted text file and outputs it.
$string = file_get_contents("sampleData.json");
echo $string;
// Instead you can query your database and parse into JSON etc etc
?>
sampleData.json Dosyası
Küçük bir DataTable öğesinin JSON sürümü.
{
"cols": [
{"id":"","label":"Topping","pattern":"","type":"string"},
{"id":"","label":"Slices","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
{"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
{"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
]
}
Daha Fazla Bilgi: