Infographics (Deprecated)

POST Requests

This document describes why and how to request an image using HTTP POST.

Contents

  1. Overview
  2. JavaScript POST Requests
  3. PHP POST Requests

Overview

If you are requesting an image in code, or if you need a URL longer than 2K characters, you will need to send your image request using HTTP POST. The infographics server supports HTTP POST requests up to 16K long.

Here's an example of the most basic kind of POST request: using a <form> element:

This image is actually a page hosted in an <iframe>. Here is the form code:

<form action='https://chart.googleapis.com/chart' method='POST'>
  <input type='hidden' name='cht' value='qr' />
  <input type='hidden' name='chs' value='300x300' />
  <input type='hidden' name='chl' value='This is my QR code'/>
  <input type='submit'  />
</form>

The response to a valid POST request is a PNG image, the same as a GET request response.

Tip: Some browsers cache requests to a specific URL, so even if you change the POST parameters, the browser won't actually requery the image server. This can cause a problem when trying to reload an image that changes often (which can be a problem during testing). To work around this, add ?chid=value at the end of the POST URL, where value changes with every request: the image server will ignore this parameter, and the browser will resend the query, and not simply reload the cached version.

There are a number of ways to use POST, and all of them require additional coding either in the page code or on the server hosting the page. To use POST, you will typically create a separate page for each image, and embed or link to these pages in your main page using <iframe> or as an <img> tags as shown below.

Here are examples of using POST with both JavaScript and PHP.

Using JavaScript for a POST Request

The easiest way to make a JavaScript POST request is to create a page that hosts a form with image data in <input> elements, and have the page POST the request in its onLoad() handler, and the page will be replaced by the image PNG. The page that hosts this image should include this page using an <iframe>. Here's the code for the image page:

Note: The sample below includes a chid parameter set to a changing value in the URL. This causes the browser to refresh for the reason described in the tip above. If your image doesn't change often, you don't need to add that parameter.

post_infographic.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 image.
    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'
          onsubmit="this.action = 'https://chart.googleapis.com/chart?chid=' + (new Date()).getMilliseconds(); return true;">  <input type='hidden' name='cht' value='qr' />
      <input type='hidden' name='cht' value='qr' />
      <input type='hidden' name='chs' value='300x300' />
      <input type='hidden' name='chl' value='This is my QR code' />
      <input type='submit'  />
    </form>
  </body>
</html>

If you use a <form> element, you do not need to URL-encode your strings.

This image can then be loaded into another page by using an <iframe> in your host page, such as this:

another_page.html

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

Using PHP for a POST Request

Most server-side languages support explicit POST requests. Here's an example of making a POST request using PHP. This example demonstrates a page that generates a QR code with 150 random values. To use this yourself, you would customize the $qrcode array to include your own values.

Note:The sample below includes a chid parameter set to a changing value in the URL. This causes the browser to refresh for the reason described in the tip above. If your image doesn't change often, you don't need to add that parameter.

imageserver-image.php

<?php
  // Create some random text-encoded data for a QR code.
  header('content-type: image/png');
  $url = 'https://chart.googleapis.com/chart?chid=' . md5(uniqid(rand(), true));
  $chd = 't:';
  for ($i = 0; $i < 150; ++$i) {
    $data = rand(0, 100000);
    $chd .= $data . ',';
  }
  $chd = substr($chd, 0, -1);

  // Add image type, image size, and data to params.
  $qrcode = array(
    'cht' => 'qr',
    'chs' => '300x300',
    'chl' => $chd);

  // Send the request, and print out the returned bytes.
  $context = stream_context_create(
    array('http' => array(
      'method' => 'POST',
      'content' => http_build_query($qrcode))));
  fpassthru(fopen($url, 'r', false, $context));
?>

Embedding this image is easier than the JavaScript example, because you can simply point to your POST page with an <img> tag, as shown here:

another_page.html

<img width='300' height='300' src='imageserver-image.php'>

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.