La especificación de tu gráfico como una URL en tu navegador o una etiqueta <img> se denomina solicitud GET. Realizar una solicitud GET es simple, pero las URL GET están limitadas a 2,000 caracteres. ¿Qué sucede si tiene más datos?
Afortunadamente, la API de Charts admite HTTP POST para solicitudes de gráfico de hasta 16,000 de duración. La compensación es la complejidad agregada de usar POST.
Aquí tienes un ejemplo del tipo más básico de solicitud POST: con un elemento <form>:
Este gráfico es, en realidad, una página alojada en <iframe>. Este es el código del formulario:
<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 respuesta a una solicitud POST válida es un gráfico PNG, al igual que una respuesta GET de solicitud.
Existen varias maneras de usar POST y todas requieren codificación adicional, ya sea en el código de la página o en el servidor que aloja la página. Si quieres usar POST, por lo general, crearás una página separada para cada gráfico y, además, incorporarás estas páginas en tu página principal o vincularás a ellas mediante las etiquetas <iframe> o <img>, como se muestra a continuación.
Estos son ejemplos de cómo usar POST con JavaScript y PHP.
Usar JavaScript para una solicitud POST
La forma más sencilla de realizar una solicitud POST de JavaScript es crear una página que aloje un formulario con datos del gráfico en elementos <input> y que la página publique la solicitud en su controlador onLoad(). La página se reemplazará por el gráfico PNG. La página que aloja este gráfico debe incluirla mediante un elemento <iframe>.
Este es el código para la página del gráfico:
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 usas un elemento <form>, no necesitas codificar en formato URL las strings (aunque debes usar caracteres especiales, como | para crear un retorno de carro en los títulos de gráficos).
Este gráfico se puede cargar en otra página mediante un <iframe> en tu página host, como se muestra a continuación:
another_page.html.
<iframe src="post_chart.html" width="300" height="200"></iframe>
Usa PHP para una solicitud POST
La mayoría de los idiomas del servidor admiten solicitudes POST explícitas. Aquí tienes un ejemplo de cómo realizar una solicitud POST con PHP. En este ejemplo, se muestra una página que genera un gráfico de líneas con 150 valores aleatorios. Si deseas usarlo por tu cuenta, debes personalizar el arreglo $chart para incluir tus propios valores.
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));
?>
Incorporar este gráfico es más fácil que el ejemplo de JavaScript, ya que puedes dirigir a tu página POST con una etiqueta <img>, como se muestra aquí:
another_page.html.
<img width='600' height='200' src='chartserver-image.php'>