POST リクエスト

ブラウザで URL または <img> タグとしてグラフを指定することを、GET リクエストと呼びます。GET リクエストの作成は簡単ですが、GET URL は 2, 000 文字に制限されています。それより多くデータがある場合はどうなるでしょうか。

幸いなことに、Chart API では、最大 16, 000 の長さのグラフ リクエストに対して 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> タグとして、メインページにこれらのページを埋め込むかリンクします。

JavaScript と PHP の両方で POST を使用する例を次に示します。

POST リクエストに JavaScript を使用する

JavaScript POST リクエストを作成する最も簡単な方法は、<input> 要素にグラフデータを含むフォームをホストするページを作成し、そのページの onLoad() ハンドラでそのページのリクエストを POST 送信することです。これにより、ページはグラフの 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>

POST リクエストに PHP を使用する

ほとんどのサーバーサイド言語は明示的な POST リクエストをサポートしています。PHP を使用して POST リクエストを行う例を次に示します。この例は、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> タグで POST ページを指定するだけです。

another_page.html

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