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 đưa ra yêu cầu GET rất đơn giản, nhưng GET URL được giới hạn ở 2.000 ký tự. Nếu bạn có nhiều dữ liệu hơn mức đó thì sao?
May mắn thay, API biểu đồ hỗ trợ HTTP POST cho các yêu cầu biểu đồ dài đến 16 nghìn. Ưu điểm của việc này là sự phức tạp hơn 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 ra 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 yêu cầu POST hợp lệ là biểu đồ PNG, giống như phản hồi yêu cầu GET.
Có một số cách sử dụng POST và tất cả những cách đó đều yêu cầu lập trình bổ sung trong mã trang hoặc trên máy chủ lưu trữ trang. Để sử dụng phương thức POST, thông thường, bạn sẽ tạo một trang riêng cho mỗi biểu đồ và nhúng hoặc liên kết những trang này trong trang chính bằng cách sử dụng <iframe> hoặc dưới dạng thẻ <img> như minh hoạ dưới đây.
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 một yêu cầu POST qua 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>, và để trang đó POST yêu cầu trong trình xử lý onLoad(), và trang đó 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>.
Sau đâ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 mã hoá URL các chuỗi của mình (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ự trả lại vị trí đầu dòng trong tiêu đề biểu đồ).
Sau đó, bạn có thể tải biểu đồ này vào một trang khác bằng cách sử dụng <iframe> trên trang lưu trữ, chẳng hạn như:
another_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 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 hoạ một trang tạo ra một biểu đồ dạng đường có 150 giá trị ngẫu nhiên. Để tự sử dụng giá trị này, bạn có thể 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));
?>
Nhúng biểu đồ này dễ dàng hơn ví dụ về JavaScript vì bạn chỉ cần trỏ đến trang POST bằng một thẻ <img> như minh hoạ dưới đây:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>