يُطلق على تحديد الرسم البياني كعنوان URL في المتصفح أو علامة <img> اسم طلب GET. يُعد تقديم طلب GET أمرًا بسيطًا، ولكن عناوين URL GET محدودة بعدد 2000 حرف كحد أقصى. ماذا لو كانت لديك بيانات أكثر من ذلك؟
ولحسن الحظ، تتيح واجهة برمجة التطبيقات للمخطط استخدام طريقة 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.
استخدام جافا سكريبت لطلب POST
أسهل طريقة لإرسال طلب JavaScript 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'>