브라우저에서 차트를 URL 또는 <img> 태그로 지정하는 것을 GET 요청이라고 합니다. GET 요청은 간단하지만 GET URL은 2, 000자(영문 기준)로 제한됩니다. 이보다 더 많은 데이터가 있다면 어떻게 해야 할까요?
다행히 Chart API는 최대 16K 길이의 차트 요청에 대해 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> 태그로 기본 페이지에 이러한 페이지를 삽입하거나 연결합니다.
다음은 자바스크립트와 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));
?>
아래와 같이 <img> 태그를 사용하여 POST 페이지를 가리킬 수 있으므로 이 차트를 삽입하는 것이 자바스크립트 예시보다 쉽습니다.
another_page.html
<img width='600' height='200' src='chartserver-image.php'>