Menentukan diagram sebagai URL di browser atau tag <img> disebut permintaan GET. Membuat permintaan GET itu sederhana, tetapi URL GET dibatasi hingga 2 ribu karakter. Bagaimana jika Anda memiliki lebih banyak data dari itu?
Untungnya, Chart API mendukung HTTP POST untuk permintaan diagram yang panjangnya mencapai 16 ribu. Komprominya adalah kompleksitas tambahan saat menggunakan POST.
Berikut adalah contoh jenis permintaan POST yang paling dasar: menggunakan elemen <form>:
Diagram ini sebenarnya adalah halaman yang dihosting di <iframe>. Berikut
adalah kode formulir:
<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>
Respons terhadap permintaan POST yang valid adalah diagram PNG, sama dengan respons permintaan GET.
Ada sejumlah cara untuk menggunakan POST, dan semuanya memerlukan coding tambahan
baik dalam kode halaman maupun di server
yang menghosting halaman. Untuk menggunakan POST, Anda biasanya akan membuat halaman terpisah untuk setiap diagram, dan menyematkan atau menautkan halaman tersebut di halaman utama Anda menggunakan <iframe> atau sebagai tag <img> seperti yang ditunjukkan di bawah ini.
Berikut adalah contoh penggunaan POST dengan JavaScript dan PHP.
Menggunakan JavaScript untuk Permintaan POST
Cara termudah untuk membuat permintaan POST JavaScript adalah dengan membuat halaman yang menghosting formulir dengan data diagram di elemen <input>, dan membuat halaman tersebut POST permintaan di pengendali onLoad(), dan halaman akan diganti dengan diagram PNG. Halaman yang menghosting diagram ini harus menyertakan halaman ini menggunakan <iframe>.
Berikut adalah kode untuk halaman diagram:
post_chart.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>
Jika menggunakan elemen <form>, Anda tidak perlu mengenkode URL string (meskipun Anda tetap perlu menggunakan karakter khusus, seperti | untuk membuat enter) dalam judul diagram).
Diagram ini kemudian dapat dimuat ke halaman lain menggunakan <iframe> di halaman host Anda, seperti ini:
halaman_lain.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Menggunakan PHP untuk Permintaan POST
Sebagian besar bahasa sisi server mendukung permintaan POST eksplisit. Berikut adalah contoh
membuat permintaan POST menggunakan PHP. Contoh ini menunjukkan halaman yang membuat
diagram garis dengan 150 nilai acak. Untuk menggunakannya sendiri, Anda harus menyesuaikan array $chart untuk menyertakan nilai Anda sendiri.
diagramserver-gambar.php
<?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));
?>
Menyematkan diagram ini lebih mudah daripada contoh JavaScript, karena Anda cukup mengarahkan ke halaman POST dengan tag <img>, seperti yang ditunjukkan di sini:
halaman_lain.html
<img width='600' height='200' src='chartserver-image.php'>