Wenn Sie das Diagramm im Browser als URL oder als <img>-Tag angeben, wird dies als GET-Anfrage bezeichnet. Eine GET-Anfrage lässt sich ganz einfach stellen, GET-URLs sind jedoch auf 2.000 Zeichen beschränkt. Was ist, wenn Sie mehr Daten haben?
Glücklicherweise unterstützt die Chart API HTTP POST für Diagrammanfragen mit einer Länge von bis zu 16 KB. Der Nachteil ist die zusätzliche Komplexität bei der Verwendung von POST.
Hier ein Beispiel für die einfachste Art von POST-Anfrage: mit einem <form>-Element:
Dieses Diagramm ist eigentlich eine Seite, die in einem <iframe> gehostet wird. Hier ist der Formularcode:
<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>
Die Antwort auf eine gültige POST-Anfrage ist ein PNG-Diagramm, genau wie eine GET-Anfrageantwort.
Es gibt verschiedene Möglichkeiten, POST zu verwenden, und alle erfordern zusätzliche Codierung entweder im Seitencode oder auf dem Server, auf dem die Seite gehostet wird. Wenn Sie POST verwenden möchten, erstellen Sie in der Regel eine separate Seite für jedes Diagramm und betten bzw. verlinken Sie diese Seiten auf Ihrer Hauptseite mithilfe von <iframe> oder als <img>-Tags, wie unten gezeigt.
Im Folgenden finden Sie Beispiele für die Verwendung von POST mit JavaScript und PHP.
Verwenden von JavaScript für eine POST-Anfrage
Der einfachste Weg, eine JavaScript-POST-Anfrage zu senden, besteht darin, eine Seite zu erstellen, die ein Formular mit Diagrammdaten in <input>-Elementen hostet und die Seite die Anfrage im onLoad()-Handler POSTet. Die Seite wird dann durch das Diagramm-PNG ersetzt. Die Seite, auf der dieses Diagramm gehostet wird, sollte diese Seite mithilfe eines <iframe> enthalten.
Hier ist der Code für die Diagrammseite:
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>
Wenn Sie ein <form>-Element verwenden, müssen Sie die Strings nicht URL-codieren. Allerdings müssen Sie Sonderzeichen wie | verwenden, um einen Zeilenumbruch in Diagrammtiteln zu erstellen.
Dieses Diagramm kann dann mit einem <iframe> auf deiner Hostseite auf eine andere Seite geladen werden. Beispiel:
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
PHP für eine POST-Anfrage verwenden
Die meisten serverseitigen Sprachen unterstützen explizite POST-Anfragen. Hier ist ein Beispiel für eine POST-Anfrage mit PHP. Dieses Beispiel zeigt eine Seite, auf der ein Liniendiagramm mit 150 Zufallswerten generiert wird. Wenn Sie diese Funktion selbst verwenden möchten, passen Sie das Array $chart so an, dass Ihre eigenen Werte enthalten sind.
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));
?>
Das Einbetten dieses Diagramms ist einfacher als das JavaScript-Beispiel, da Sie einfach mit einem <img>-Tag auf Ihre POST-Seite verweisen können, wie hier gezeigt:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>