Specifying your chart as a URL in your browser or an <img> tag
is called a GET request. Making a GET request is simple, but GET URLs are limited
to 2K characters. What if you have more data than that?
Luckily, the Chart API supports HTTP POST for chart requests up to 16K long. The trade-off is the added complexity of using POST.
Here's an example of the most basic kind of POST request: using a <form> element:
This chart 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="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>
The response to a valid POST request is a PNG chart, the same as a GET request response.
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 chart, 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 chart data in <input> elements, and have the page
POST the request in its onLoad() handler, and the page will be replaced by the chart
PNG. The page that hosts this chart should include this page using an <iframe>.
Here's the code for the chart page:
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>
If you use a <form> element, you do not need to URL-encode
your strings (although you will still need to use special characters, such
as | to create a carriage return in chart titles).
This chart can then be loaded into another page by using an <iframe> in
your host page, such as this:
another_page.html
<iframe src="post_chart.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 line chart with 150 random values. To use this yourself, you would customize
the $chart array
to include your own values.
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));
?>
Embedding this chart 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='600' height='200' src='chartserver-image.php'>