브라우저에서 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 요청에 대한 응답은 PNG 차트이며 GET 요청 응답과 동일합니다.
POST를 사용할 수 있는 방법에는 여러 가지가 있으며 모두 페이지 코드나 페이지를 호스팅하는 서버에서 추가 코딩이 필요합니다. POST를 사용하려면 일반적으로 차트마다 별도의 페이지를 만들고, 아래와 같이 <iframe> 또는 <img> 태그를 사용하여 기본 페이지에서 이러한 페이지를 삽입하거나 연결합니다.
다음은 자바스크립트와 PHP에서 POST를 사용하는 예입니다.
POST 요청에 자바스크립트 사용
자바스크립트 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>를 사용하여 다른 페이지에 로드할 수 있습니다.
다른 페이지.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 페이지를 가리킬 수 있기 때문입니다.
다른 페이지.html
<img width='600' height='200' src='chartserver-image.php'>