Grafiğinizi tarayıcınızda bir URL veya <img> etiketi olarak belirtmeye GET isteği denir. GET isteği göndermek kolaydır ancak GET URL'leri 2.000 karakterle sınırlıdır. Bundan daha fazla veriniz varsa ne olur?
Neyse ki Chart API, en fazla 16.000 karaktere sahip grafik istekleri için HTTP POST'u destekliyor. Bunun karşılığında POST kullanmanın karmaşıklığı daha da karmaşık hale geliyor.
En temel POST isteği türüne örnek: <form> öğesi kullanma:
Bu grafik aslında <iframe> içinde barındırılan bir sayfadır. Form kodunu aşağıda bulabilirsiniz:
<form action='https://chart.googleapis.com/chart' method='POST'> <input type="hidden" name="cht" value="lc" /> <input type="hidden" name="chtt" value="This is | my chart" /> <input type='hidden' name='chs' value='600x200' /> <input type="hidden" name="chxt" value="x,y" /> <input type='hidden' name='chd' value='t:40,20,50,20,100'/> <input type="submit" /> </form>
Geçerli bir POST isteğine verilen yanıt, GET isteği yanıtıyla aynı olan PNG grafiğidir.
POST'u kullanmanın birkaç yolu vardır ve bunların tümü, sayfa kodunda veya sayfayı barındıran sunucuda ek kodlama gerektirir. POST özelliğini kullanmak için genellikle her grafik için ayrı bir sayfa oluşturursunuz ve bu sayfaları, ana sayfanızı <iframe> kullanarak veya aşağıda gösterildiği gibi bir <img> etiketi olarak yerleştirebilir veya bu sayfalara bağlantı verebilirsiniz.
Aşağıda, POST'un hem JavaScript hem de PHP ile kullanımına dair örnekler verilmiştir.
POST İsteği için JavaScript kullanma
JavaScript POST isteğinde bulunmanın en kolay yolu, <input> öğelerinde grafik verileri içeren bir form barındıran bir sayfa oluşturup bunu POST sayfasının onLoad() işleyicisinde bulundurmasını sağlamaktır. Sayfa, grafik PNG olarak değiştirilir. Bu grafiği barındıran sayfa <iframe> kullanarak bu sayfayı içermelidir.
Grafik sayfası için kod:
post_graphic.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
// Send the POST when the page is loaded,
// which will replace this whole page with the retrieved chart.
function loadGraph() {
var frm = document.getElementById('post_form');
if (frm) {
frm.submit();
}
}
</script>
</head>
<body onload="loadGraph()">
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form'>
<input type='hidden' name='cht' value='lc'/>
<input type='hidden' name='chtt' value='This is | my chart'/>
<input type='hidden' name='chs' value='300x200'/>
<input type='hidden' name='chxt' value='x'/>
<input type='hidden' name='chd' value='t:40,20,50,20,100'/>
<input type='submit'/>
</form>
</body>
</html>
<form> öğesi kullanıyorsanız dizelerinizi URL olarak kodlamanız gerekmez (ancak liste başlıklarında satır başı karakteri oluşturmak için | gibi özel karakterler kullanmanız gerekir).
Bu grafik, ana makine sayfanızda aşağıdaki gibi bir <iframe> kullanılarak başka bir sayfaya yüklenebilir:
başka_sayfa.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
POST İsteği için PHP'yi kullanma
Sunucu tarafı dillerinin çoğu, açık POST isteklerini destekler. PHP kullanarak POST isteği göndermeyle ilgili bir örneği burada bulabilirsiniz. Bu örnekte, 150 rastgele değere sahip çizgi grafik oluşturan bir sayfa gösterilmektedir. Bunu kendiniz kullanmak için $chart dizisini kendi değerlerinizi içerecek şekilde özelleştirirsiniz.
grafiksunucusu-resim.csv
<?php
// Create some random text-encoded data for a line chart.
header('content-type: image/png');
$url = 'https://chart.googleapis.com/chart';
$chd = 't:';
for ($i = 0; $i < 150; ++$i) {
$data = rand(0, 100000);
$chd .= $data . ',';
}
$chd = substr($chd, 0, -1);
// Add data, chart type, chart size, and scale to params.
$chart = array(
'cht' => 'lc',
'chs' => '600x200',
'chds' => '0,100000',
'chd' => $chd);
// Send the request, and print out the returned bytes.
$context = stream_context_create(
array('http' => array(
'method' => 'POST',
'content' => http_build_query($chart))));
fpassthru(fopen($url, 'r', false, $context));
?>
Burada gösterildiği gibi POST sayfanızı bir <img> etiketiyle işaret edebileceğiniz için bu tabloyu yerleştirmek JavaScript örneğinden daha kolaydır:
başka_sayfa.html
<img width='600' height='200' src='chartserver-image.php'>