पोस्ट अनुरोध

अपने चार्ट को, ब्राउज़र में यूआरएल या <img> टैग के तौर पर बताने को जीईटी अनुरोध कहा जाता है. जीईटी अनुरोध करना आसान है. हालांकि, जीईटी यूआरएल में ज़्यादा से ज़्यादा 2,000 वर्ण ही हो सकते हैं. अगर आपके पास इससे ज़्यादा डेटा है, तो क्या होगा?

अच्छी बात यह है कि Chart API, 16K तक की अवधि वाले चार्ट अनुरोधों के लिए एचटीटीपी पीओएसटी का इस्तेमाल करता है. हालांकि, पीओएसटी का इस्तेमाल करना पहले से ज़्यादा मुश्किल हो जाता है.

यहां सबसे बुनियादी तरह के पीओएसटी अनुरोध का उदाहरण दिया गया है: <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>

मान्य पोस्ट अनुरोध का रिस्पॉन्स एक PNG चार्ट होता है, जो जीईटी अनुरोध के रिस्पॉन्स की तरह ही होता है.

पीओएसटी का इस्तेमाल करने के कई तरीके हैं. साथ ही, इन सभी के लिए पेज कोड या पेज को होस्ट करने वाले सर्वर पर, अतिरिक्त कोडिंग की ज़रूरत होती है. पीओएसटी का इस्तेमाल करने के लिए, आम तौर पर हर चार्ट के लिए एक अलग पेज बनाना होगा. साथ ही, <iframe> या <img> टैग का इस्तेमाल करके, इन पेजों को अपने मुख्य पेज में जोड़ना या लिंक करना होगा, जैसा कि यहां दिखाया गया है.

यहां JavaScript और PHP, दोनों के साथ POST का इस्तेमाल करने के उदाहरण दिए गए हैं.

पोस्ट अनुरोध के लिए JavaScript का इस्तेमाल करना

JavaScript पीओएसटी से जुड़ा अनुरोध करने का सबसे आसान तरीका यह है कि आप एक ऐसा पेज बनाएं जो <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> एलिमेंट का इस्तेमाल करते हैं, तो आपको अपनी स्ट्रिंग को यूआरएल-एन्कोड करने की ज़रूरत नहीं है (हालांकि, आपको अब भी चार्ट के टाइटल में नई लाइन शुरू करने के लिए | जैसे खास वर्णों का इस्तेमाल करना होगा).

इसके बाद, इस चार्ट को आपके होस्ट पेज में <iframe> का इस्तेमाल करके, किसी दूसरे पेज में लोड किया जा सकता है, जैसे कि:

another_page.html

<iframe src="post_chart.html" width="300" height="200"></iframe>

पोस्ट अनुरोध के लिए PHP का इस्तेमाल करना

सर्वर साइड की ज़्यादातर भाषाओं में, साफ़ तौर पर पोस्ट करने के अनुरोध किए जा सकते हैं. यहां 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 के उदाहरण से इस चार्ट को जोड़ना आसान है, क्योंकि आप <img> टैग का इस्तेमाल करके, अपने पीओएसटी पेज पर जा सकते हैं, जैसा कि यहां दिखाया गया है:

another_page.html

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