Wenn Sie das Diagramm als URL in Ihrem Browser oder in einem <img>-Tag angeben, wird dies als GET-Anfrage bezeichnet. Eine GET-Anfrage ist einfach, aber GET-URLs sind 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.000 Zeichen. Der Nachteil ist die zusätzliche Komplexität bei der Verwendung von POST.
Hier ein Beispiel für die grundlegendste POST-Anfrage: <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, das mit einer GET-Anfrageantwort übereinstimmt.
Es gibt eine Reihe von Möglichkeiten, POST zu verwenden. Alle erfordern zusätzliches Programmieren entweder im Seitencode oder auf dem Server, auf dem die Seite gehostet wird. Wenn du POST verwenden möchtest, musst du für jedes Diagramm in der Regel eine separate Seite erstellen und diese Seiten mithilfe von <iframe> oder als <img>-Tags auf deiner Hauptseite einbetten oder verlinken.
Hier sehen Sie Beispiele für die Verwendung von POST mit JavaScript und PHP.
JavaScript für POST-Anfragen verwenden
Die einfachste Methode für eine JavaScript-POST-Anfrage besteht darin, eine Seite zu erstellen, die ein Formular mit Diagrammdaten in <input>-Elementen hostet und die Seite POST-Anfragen in den onLoad()-Handler sendet. Die Seite wird dann durch das Diagramm-PNG ersetzt. Die Seite, auf der dieses Diagramm gehostet wird, sollte diese Seite mit einem <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 Ihre Strings nicht URL-codieren (allerdings müssen Sie trotzdem Sonderzeichen wie | verwenden, um einen Zeilenumbruch in Diagrammtiteln zu erstellen).
Dieses Diagramm kann dann mit einem <iframe> auf der Hostseite in eine andere Seite geladen werden. Beispiel:
andere_seite.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 siehst du ein Beispiel für eine POST-Anfrage mit PHP. Dieses Beispiel zeigt eine Seite, die ein Liniendiagramm mit 150 Zufallswerten generiert. Wenn Sie diese Funktion selbst verwenden möchten, fügen Sie das $chart-Array so ein, 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 du wie hier gezeigt einfach mit einem <img>-Tag auf deine POST-Seite zeigen kannst:
andere_seite.html
<img width='600' height='200' src='chartserver-image.php'>