Menentukan diagram sebagai URL di browser atau tag <img>
disebut permintaan GET. Pembuatan permintaan GET cukup mudah, tetapi URL GET dibatasi
hingga 2.000 karakter. Bagaimana jika Anda memiliki data
lebih dari itu?
Untungnya, Chart API mendukung HTTP POST untuk permintaan diagram dengan panjang hingga 16 ribu. Kompromi adalah kompleksitas tambahan dalam 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 formulirnya:
<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 pada server
yang menghosting halaman tersebut. Untuk menggunakan POST, biasanya Anda akan membuat halaman terpisah untuk
setiap diagram, dan menyematkan atau menautkan ke halaman tersebut di
halaman utama 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 membuat halaman yang menghosting
formulir dengan data diagram dalam elemen <input>, dan membuat halaman
MEMPOSTING permintaan di pengendali onLoad(), dan halaman akan diganti dengan PNG diagram. 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 string ke URL (meskipun Anda tetap perlu menggunakan karakter khusus, seperti | untuk membuat enter pada judul diagram).
Diagram ini kemudian dapat dimuat ke halaman lain dengan menggunakan <iframe> di
halaman host Anda, seperti ini:
another_page.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
pembuatan permintaan POST menggunakan PHP. Contoh ini menunjukkan halaman yang menghasilkan
diagram garis dengan 150 nilai acak. Untuk menggunakannya sendiri, Anda perlu menyesuaikan array $chart untuk menyertakan nilai Anda sendiri.
chartserver-image.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:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>