ציון התרשים ככתובת URL בדפדפן או בתג <img>
נקרא בקשת GET. קל לשלוח בקשת GET, אבל כתובות ה-URL של GET מוגבלות ל-2,000 תווים. מה קורה אם יש לכם יותר נתונים?
למזלכם, API של Chart תומך ב-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
הדרך הקלה ביותר לשלוח בקשת HTTP POST היא ליצור דף שמארח טופס עם נתוני תרשים באלמנטים של <input>, ולהגדיר את הדף לפרסום הבקשה ב-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'>