Việc chỉ định biểu đồ dưới dạng URL trong trình duyệt hoặc thẻ <img> được gọi là yêu cầu GET. Việc tạo yêu cầu GET rất đơn giản nhưng URL GET bị giới hạn ở mức 2 nghìn ký tự. Nếu bạn có nhiều dữ liệu hơn thì sao?
May mắn thay, API biểu đồ hỗ trợ POST HTTP cho các yêu cầu biểu đồ có thời lượng lên đến 16K. Đổi lại là sự phức tạp thêm khi sử dụng POST.
Dưới đây là ví dụ về loại yêu cầu POST cơ bản nhất: sử dụng phần tử <form>:
Biểu đồ này thực sự là một trang được lưu trữ trong <iframe>. Sau đây là mã biểu mẫu:
<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>
Phản hồi cho một yêu cầu POST hợp lệ là một biểu đồ PNG, giống như phản hồi GET yêu cầu.
Có một số cách để sử dụng POST và tất cả các cách này đều yêu cầu lập trình thêm trong mã trang hoặc trên máy chủ lưu trữ trang. Để sử dụng POST, thông thường bạn sẽ tạo một trang riêng cho từng biểu đồ và nhúng hoặc liên kết đến các trang này trong trang chính bằng cách sử dụng <iframe> hoặc thẻ <img> như minh hoạ bên dưới.
Dưới đây là ví dụ về cách sử dụng POST với cả JavaScript và PHP.
Sử dụng JavaScript cho yêu cầu POST
Cách dễ nhất để tạo yêu cầu POST cho JavaScript là tạo một trang lưu trữ biểu mẫu có dữ liệu biểu đồ trong các phần tử <input>, đồng thời yêu cầu trang POST yêu cầu trong trình xử lý onLoad() và trang này sẽ được thay thế bằng biểu đồ PNG. Trang lưu trữ biểu đồ này phải bao gồm trang này bằng cách sử dụng <iframe>.
Dưới đây là mã cho trang biểu đồ:
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>
Nếu sử dụng phần tử <form>, bạn không cần phải mã hoá URL
các chuỗi (mặc dù bạn vẫn cần sử dụng các ký tự đặc biệt, chẳng hạn như | để tạo kết quả trả lại vị trí đầu dòng trong tiêu đề biểu đồ).
Sau đó, biểu đồ này có thể được tải vào một trang khác bằng cách sử dụng <iframe> trong
trang lưu trữ của bạn, chẳng hạn như sau:
other_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Sử dụng PHP cho yêu cầu POST
Hầu hết các ngôn ngữ phía máy chủ đều hỗ trợ các yêu cầu POST rõ ràng. Dưới đây là ví dụ về
cách tạo yêu cầu POST bằng PHP. Ví dụ này minh họa một trang tạo ra biểu đồ dạng đường có 150 giá trị ngẫu nhiên. Để tự sử dụng, bạn sẽ tuỳ chỉnh
mảng $chart
để thêm các giá trị của riêng mình.
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));
?>
Cách nhúng biểu đồ này dễ dàng hơn so với ví dụ về JavaScript, vì bạn có thể chỉ cần trỏ đến trang POST của mình bằng thẻ <img>, như minh hoạ bên dưới:
other_page.html
<img width='600' height='200' src='chartserver-image.php'>