Specificare il grafico come URL nel browser o come tag <img>
viene chiamato richiesta GET. Effettuare una richiesta GET è semplice, ma gli URL GET sono limitati a 2000 caratteri. Cosa succede se hai un numero di dati maggiore?
Fortunatamente, l'API Chart supporta HTTP POST per le richieste di grafici fino a 16K. Un compromesso è la maggiore complessità di utilizzare POST.
Ecco un esempio del tipo più semplice di richiesta POST: l'utilizzo di 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 a una risposta della richiesta GET.
Esistono diversi modi per utilizzare POST e tutti richiedono una codifica aggiuntiva nel codice della pagina o sul server che ospita la pagina. Per utilizzare POST, in genere crei una pagina separata per ogni grafico e incorpora o crei link a queste pagine nella pagina principale utilizzando <iframe> o come tag <img> come mostrato di seguito.
Ecco alcuni esempi di utilizzo di POST sia con JavaScript che con PHP.
Utilizzare JavaScript per una richiesta POST
Il modo più semplice per effettuare una richiesta POST JavaScript è creare una pagina che ospita
un modulo con i dati del grafico negli elementi <input> e fare in modo che la pagina
POST la richiesta nel relativo gestore onLoad() e la pagina verrà sostituita dal grafico
PNG. La pagina che ospita questo grafico deve includere questa pagina mediante <iframe>.
Ecco il codice per la pagina del grafico:
grafico_post.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 usi un elemento <form>, non è necessario codificare le stringhe nell'URL (anche se dovrai comunque utilizzare caratteri speciali, ad esempio | 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, in questo modo:
altra_pagina.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Utilizzo di PHP per una richiesta POST
La maggior parte dei linguaggi lato server supporta richieste POST esplicite. Ecco un esempio di richiesta di pubblicazione tramite POST. Questo esempio illustra 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.
graficoserver-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));
?>
L'incorporamento di questo grafico è più semplice rispetto all'esempio di JavaScript perché puoi semplicemente indirizzare la tua pagina POST con un tag <img>, come mostrato di seguito:
altra_pagina.html
<img width='600' height='200' src='chartserver-image.php'>