La spécification d'un graphique en tant qu'URL dans votre navigateur ou d'un tag <img> est appelée requête GET. Il est facile d'effectuer une requête GET, mais les URL GET sont limitées à 2 000 caractères. Et si vous avez plus de données que cela ?
Heureusement, l'API Chart est compatible avec HTTP POST pour les requêtes de graphiques de 16 Ko maximum. Le compromis est la complexité supplémentaire de l'utilisation de la méthode POST.
Voici un exemple du type de requête POST le plus basique avec un élément <form> :
Ce graphique est en réalité une page hébergée dans une <iframe>. Voici le code du formulaire:
<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 réponse à une requête POST valide est un graphique PNG, identique à une requête GET.
Il existe plusieurs façons d'utiliser la méthode POST, et toutes nécessitent du codage supplémentaire dans le code de la page ou sur le serveur qui l'héberge. Pour utiliser la méthode POST, vous devez généralement créer une page distincte pour chaque graphique, puis intégrer ces pages dans votre page principale ou créer un lien vers ces pages à l'aide de <iframe> ou de balises <img>, comme illustré ci-dessous.
Voici des exemples d'utilisation de la méthode POST avec JavaScript et PHP.
Utiliser JavaScript pour une requête POST
Le moyen le plus simple d'envoyer une requête POST JavaScript consiste à créer une page qui héberge un formulaire contenant des données de graphique dans des éléments <input>, puis à demander à la page d'envoyer la requête POST dans son gestionnaire onLoad(), et la page sera remplacée par le graphique PNG. La page qui héberge ce graphique doit inclure cette page à l'aide d'un <iframe>.
Voici le code de la page du graphique:
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>
Si vous utilisez un élément <form>, vous n'avez pas besoin d'encoder vos chaînes en URL (bien que vous deviez toujours utiliser des caractères spéciaux tels que | pour créer un retour chariot dans les titres du graphique).
Ce graphique peut ensuite être chargé sur une autre page en utilisant un <iframe> dans votre page hôte, comme suit:
autre_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Utiliser PHP pour une requête POST
La plupart des langages côté serveur acceptent les requêtes POST explicites. Voici un exemple de requête POST utilisant PHP. Cet exemple montre une page qui génère un graphique en courbes avec 150 valeurs aléatoires. Pour l'utiliser vous-même, vous devez personnaliser le tableau $chart afin d'inclure vos propres valeurs.
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));
?>
Il est plus facile d'intégrer ce graphique que l'exemple JavaScript, car vous pouvez simplement pointer vers votre page POST avec une balise <img>, comme illustré ci-dessous:
autre_page.html
<img width='600' height='200' src='chartserver-image.php'>