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