عند تحديد الرسم البياني كعنوان URL في المتصفّح أو علامة <img>، يُعرف هذا الإجراء باسم طلب GET. يسهل تقديم طلب استرداد بيانات باستخدام GET، ولكن يجب أن تتضمّن عناوين URL لـ GET
2, 000 حرف كحد أقصى. ماذا لو كانت لديك بيانات أكثر من ذلك؟
لحسن الحظ، تدعم Chart API طريقة HTTP POST لطلبات المخططات التي يصل طولها إلى 16 كيلوبايت. الحل البديل هو زيادة التعقيد لاستخدام 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 في معالج 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'>