การระบุแผนภูมิเป็น URL ในเบราว์เซอร์หรือแท็ก <img> เรียกว่าคำขอ GET การส่งคำขอ GET นั้นทำได้ง่ายๆ แต่ URL GET จะมีอักขระได้ไม่เกิน 2, 000 ตัว หากคุณมีข้อมูลมากกว่านั้น
โชคดีที่ Chart API รองรับ HTTP POST สำหรับคำขอแผนภูมิที่มีความยาวสูงสุด 16, 000 รายการ แต่ข้อดีคือมีความซับซ้อนยิ่งขึ้นในการใช้ POST
ต่อไปนี้คือตัวอย่างของคำขอ POST ที่พื้นฐานที่สุด: โดยใช้องค์ประกอบ <form>
แผนภูมินี้เป็นหน้าเว็บที่โฮสต์ใน <iframe> โค้ดของแบบฟอร์มมีดังนี้
<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>
การตอบกลับคำขอ POST ที่ถูกต้องจะเป็นแผนภูมิ PNG เช่นเดียวกับการตอบกลับคำขอ GET
การใช้ POST ทำได้หลายวิธี และทุกวิธีต้องมีการเขียนโค้ดเพิ่มเติมในโค้ดของหน้าเว็บหรือในเซิร์ฟเวอร์ที่โฮสต์หน้านั้นๆ ด้วย ในการใช้ POST คุณจะต้องสร้างหน้าแยกสำหรับแต่ละแผนภูมิ และฝังหรือลิงก์ไปยังหน้าเหล่านี้ในหน้าหลักโดยใช้ <iframe> หรือเป็นแท็ก <img> ดังที่แสดงด้านล่าง
ต่อไปนี้เป็นตัวอย่างการใช้ POST กับทั้ง JavaScript และ PHP
การใช้ JavaScript สำหรับคำขอ POST
วิธีที่ง่ายที่สุดในการส่งคำขอ POST ด้วย JavaScript คือการสร้างหน้าที่โฮสต์แบบฟอร์มที่มีข้อมูลแผนภูมิในองค์ประกอบ <input> และให้หน้า POST คำขอในเครื่องจัดการ onLoad() และหน้าเว็บจะแทนที่ด้วยแผนภูมิ PNG หน้าที่โฮสต์แผนภูมินี้ควรรวมหน้านี้โดยใช้ <iframe>
นี่คือโค้ดสำหรับหน้าแผนภูมิ
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>
หากใช้องค์ประกอบ <form> คุณไม่จําเป็นต้องเข้ารหัส URL สตริง (แม้ว่าคุณจะยังคงต้องใช้สัญลักษณ์พิเศษ เช่น | เพื่อสร้างอักขระขึ้นบรรทัดใหม่ในชื่อแผนภูมิก็ตาม)
จากนั้นคุณจะโหลดแผนภูมินี้ลงในหน้าอื่นได้โดยใช้ <iframe> ในหน้าโฮสต์ ดังตัวอย่างต่อไปนี้
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
การใช้ PHP สำหรับคำขอ POST
ภาษาฝั่งเซิร์ฟเวอร์ส่วนใหญ่จะรองรับคำขอ POST ที่ชัดแจ้ง ตัวอย่างการส่งคำขอ POST โดยใช้ PHP มีดังนี้ ตัวอย่างนี้แสดงหน้าเว็บที่สร้างแผนภูมิเส้นที่มีค่าแบบสุ่ม 150 ค่า หากต้องการใช้ค่านี้เอง คุณจะต้องปรับแต่งอาร์เรย์ $chart ให้รวมค่าของคุณเอง
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));
?>
การฝังแผนภูมินี้ง่ายกว่าตัวอย่าง JavaScript เนื่องจากคุณเพียงแค่ชี้ไปที่หน้า POST ด้วยแท็ก <img> ดังที่แสดงด้านล่างนี้
another_page.html
<img width='600' height='200' src='chartserver-image.php'>