Określenie wykresu jako adresu URL w przeglądarce lub tagu <img> jest nazywane żądaniem GET. Wykonywanie żądania GET jest proste, ale adresy URL GET są ograniczone do 2000 znaków. A jeśli masz więcej danych?
Na szczęście interfejs Chart API obsługuje żądania HTTP POST w przypadku żądań wykresów o długości do 16 tys. Zaletą tego rozwiązania jest większa złożoność korzystania z metody POST.
Oto przykład najbardziej podstawowego rodzaju żądania POST: z użyciem elementu <form>:
Ten wykres w rzeczywistości jest stroną hostowaną na serwerze <iframe>. Oto kod formularza:
<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>
Odpowiedź na prawidłowe żądanie POST to wykres w formacie PNG, taki sam jak odpowiedź na żądanie GET.
Metodę POST można wykorzystać na wiele sposobów – wszystkie wymagają dodatkowego kodowania w kodzie strony lub na serwerze hostującym stronę. Aby użyć metody POST, zwykle należy utworzyć osobną stronę dla każdego wykresu i umieścić na niej stronę lub dodać do niej linki za pomocą tagów <iframe> lub <img>, jak pokazano poniżej.
Oto przykłady zastosowania metody POST zarówno w językach JavaScript, jak i w PHP.
Używanie JavaScriptu do żądań POST
Najłatwiejszym sposobem wykonania żądania POST JavaScript jest utworzenie strony, która hostuje formularz z danymi wykresu w elementach <input> i umieść stronę POST w module obsługi onLoad(), co spowoduje zastąpienie strony wykresem PNG. Strona hostująca ten wykres powinna zawierać tę stronę za pomocą tagu <iframe>.
Oto kod strony wykresu:
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>
Jeśli używasz elementu <form>, nie musisz kodować ciągów w adresach URL (chociaż nadal musisz używać znaków specjalnych, takich jak |, by tworzyć znaki przejścia do nowej linii w tytułach wykresów).
Ten wykres można potem wczytać na inną stronę, korzystając z elementu <iframe> na stronie hostującej, np.:
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Użycie języka PHP w żądaniu POST
Większość języków po stronie serwera obsługuje jednoznaczne żądania POST. Oto przykład tworzenia żądania POST w języku PHP. Ten przykład przedstawia stronę generującą wykres liniowy ze 150 losowymi wartościami. Aby użyć go samodzielnie, musisz dostosować tablicę $chart, tak aby zawierała własne wartości.
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));
?>
Umieszczanie tego wykresu jest łatwiejsze niż przykładowego JavaScriptu, ponieważ wystarczy wskazać stronę POST za pomocą tagu <img>, jak w tym przykładzie:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>