브라우저에서 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'>