La spécification de votre graphique en tant qu'URL dans votre navigateur ou en tant que tag <img> s'appelle une requête GET. Une demande GET est simple, mais les URL GET sont limitées à 2 000 caractères. Et si vous avez plus de données ?
Heureusement, l'API Chart est compatible avec HTTP POST pour les requêtes de graphique de 16 Ko maximum. En contrepartie, l'utilisation de la méthode POST est plus complexe.
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 un <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, tout comme une réponse à une requête GET.
Il existe plusieurs façons d'utiliser la méthode POST, et toutes nécessitent un 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 à votre page principale ou créer un lien vers celles-ci à l'aide de balises <iframe> ou <img>, comme indiqué ci-dessous.
Voici des exemples d'utilisation de la méthode POST avec JavaScript et PHP.
Utilisation de JavaScript pour une requête POST
Le moyen le plus simple d'effectuer une requête POST JavaScript consiste à créer une page qui héberge un formulaire avec des données de graphique dans des éléments <input>. Ensuite, demandez à la page de publier la requête dans son gestionnaire onLoad(). La page sera remplacée par le graphique PNG. La page qui héberge ce graphique doit l'inclure à 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 en URL vos chaînes (bien que vous deviez toujours utiliser des caractères spéciaux, tels que | pour créer un retour chariot dans les titres des graphiques).
Ce graphique peut ensuite être chargé sur une autre page à l'aide d'un <iframe> dans votre page hôte, comme suit:
another_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 prennent en charge les requêtes POST explicites. Voici un exemple d'exécution d'une requête POST à l'aide de PHP. Cet exemple présente 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));
?>
L'intégration de ce graphique est plus facile que l'exemple JavaScript, car il vous suffit de pointer vers votre page POST avec une balise <img>, comme indiqué ci-dessous:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>