Określenie wykresu jako adresu URL w przeglądarce lub tagu <img>
jest nazywane żądaniem GET. Tworzenie żą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 POST w protokole HTTP w przypadku żądań wykresów o długości do 16 tys. Kompromis polega na dodatkowej złożoności korzystania z metody POST.
Oto przykład najbardziej podstawowego typu żądania POST:
Ten wykres jest w rzeczywistości stroną hostowaną w <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 jest wykresem PNG, tak samo jak odpowiedź żądania GET.
Stosowanie POST jest na wiele sposobów, a wszystkie wymagają dodatkowego kodowania w kodzie strony lub na serwerze hostującym stronę. Aby użyć metody POST, musisz utworzyć osobną stronę dla każdego wykresu i umieścić na niej swoją stronę główną lub linki do niej, korzystając z tagów <iframe>
lub <img>
, jak pokazano poniżej.
Oto przykłady zastosowania metody POST z JavaScriptem i językiem PHP.
Używanie JavaScriptu na potrzeby żądań POST
Najłatwiejszym sposobem przesłania żądania POST w języku JavaScript jest utworzenie strony zawierającej formularz z danymi wykresu w elementach <input>
i umieszczenie w nim żądania onLoad()
POST, a ta strona zostanie zastąpiona przez wykres PNG. Strona, na której znajduje się ten wykres, powinna zawierać tę stronę za pomocą <iframe>
.
Oto kod strony wykresu:
post_wykres.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ć adresów URL (chociaż nadal musisz używać znaków specjalnych, takich jak |, aby znaki przejścia do nowej linii były widoczne w tytułach na wykresach).
Ten wykres można potem wczytać na inną stronę, używając tagu <iframe>
na stronie hosta, na przykład:
inna_strona.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Używanie języka PHP w żądaniu POST
Większość języków po stronie serwera obsługuje bezpośrednie żądania POST. Oto przykład żądania POST uzyskanego w języku PHP. Ten przykład pokazuje stronę, która generuje wykres liniowy zawierający 150 losowych wartości. Aby użyć tej funkcji, dostosuj tablicę $chart
tak, aby zawierała własne wartości.
imageserver-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ż w przykładzie z JavaScriptem, bo możesz po prostu wskazać stronę POST tagiem <img>
, jak pokazano tutaj:
inna_strona.html
<img width='600' height='200' src='chartserver-image.php'>