ارسال درخواست ها

تعیین نمودار خود به عنوان یک URL در مرورگر یا تگ <img> درخواست GET نامیده می شود. ایجاد یک درخواست GET ساده است، اما URL های GET به 2K کاراکتر محدود می شود. اگر اطلاعات بیشتری از این داشته باشید چه؟

خوشبختانه، Chart API از HTTP POST برای درخواست‌های نمودار تا طول ۱۶ هزار پشتیبانی می‌کند. مبادله پیچیدگی اضافه استفاده از 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 با جاوا اسکریپت و PHP وجود دارد.

استفاده از جاوا اسکریپت برای درخواست POST

ساده ترین راه برای ایجاد یک درخواست POST جاوا اسکریپت این است که صفحه ای ایجاد کنید که فرمی را با داده های نمودار در عناصر <input> میزبانی کند، و صفحه درخواست را در کنترل کننده onLoad() 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> در صفحه میزبان خود در صفحه دیگری بارگذاری کرد، مانند این:

other_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));
?>

جاسازی این نمودار ساده تر از مثال جاوا اسکریپت است، زیرا می توانید به سادگی با یک تگ <img> به صفحه POST خود اشاره کنید، همانطور که در اینجا نشان داده شده است:

other_page.html

<img width='600' height='200' src='chartserver-image.php'>