ブラウザで URL として、または <img> タグとしてグラフを指定することを、GET リクエストと呼びます。GET リクエストの実行は簡単ですが、GET URL は 2, 000 文字に制限されています。これより多くのデータがある場合はどうでしょうか。
グラフ 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 リクエストへのレスポンスは、GET リクエスト レスポンスと同じ PNG グラフです。
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>
PHP を使用した POST リクエスト
ほとんどのサーバーサイド言語では、明示的な 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'>