Specificare il grafico come URL nel browser o come tag <img> viene chiamato richiesta GET. Effettuare una richiesta GET è semplice, ma gli URL GET hanno un limite
di 2000 caratteri. E se avessi a disposizione più dati?
Fortunatamente, l'API Chart supporta HTTP POST per richieste di grafici fino a 16.000. Il compromesso è dato dalla maggiore complessità derivante dall'uso di POST.
Ecco un esempio del tipo più semplice di richiesta POST: utilizzando un elemento <form>:
Questo grafico è in realtà una pagina ospitata in un <iframe>. Ecco
il codice del modulo:
<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>
La risposta a una richiesta POST valida è un grafico PNG, uguale alla risposta di una richiesta GET.
Esistono diversi modi per utilizzare POST e tutti richiedono una codifica aggiuntiva nel codice della pagina o sul server che la ospita. Per utilizzare POST, in genere devi creare una pagina separata per ogni grafico e incorporare o collegare queste pagine nella tua pagina principale utilizzando <iframe> o come tag <img>, come mostrato di seguito.
Ecco alcuni esempi di utilizzo di POST con JavaScript e PHP.
Utilizzo di JavaScript per una richiesta POST
Il modo più semplice per effettuare una richiesta POST JavaScript è creare una pagina che ospita un modulo con dati del grafico negli elementi <input> e fare in modo che la pagina pubblichi la richiesta nel proprio gestore onLoad(). La pagina verrà sostituita dal file PNG del grafico. La pagina che ospita questo grafico deve includere questa pagina utilizzando un <iframe>.
Ecco il codice per la pagina del grafico:
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>
Se utilizzi un elemento <form>, non è necessario eseguire la codifica URL
delle stringhe (anche se dovrai comunque utilizzare caratteri speciali, come | per creare un ritorno a capo nei titoli dei grafici).
Questo grafico può quindi essere caricato in un'altra pagina utilizzando <iframe> nella pagina host, ad esempio:
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Utilizzo di PHP per una richiesta POST
La maggior parte delle lingue lato server supporta richieste POST esplicite. Ecco un esempio di come effettuare una richiesta POST utilizzando PHP. Questo esempio mostra una pagina che genera un grafico a linee con 150 valori casuali. Per utilizzarlo autonomamente, devi personalizzare
l'array $chart
in modo da includere i tuoi valori.
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));
?>
Incorporare questo grafico è più semplice dell'esempio JavaScript, perché puoi semplicemente puntare alla tua pagina POST con un tag <img>, come mostrato qui:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>