Especificar tu gráfico como una URL en tu navegador o una etiqueta <img> se denomina solicitud GET. Realizar una solicitud GET es sencillo, pero las URLs GET tienen un límite de 2,000 caracteres. ¿Qué pasa si tienes más datos que esos?
Afortunadamente, la API de gráficos admite HTTP POST para solicitudes de gráficos de hasta 16,000. La desventaja es la complejidad agregada de usar POST.
Este es 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 un <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 a una solicitud GET.
Existen varias formas de usar POST, y todas requieren codificación adicional en el código de la página o en el servidor que la aloja. Para usar POST, por lo general, debes crear una página separada para cada gráfico y, luego, incorporar estas páginas o incluir un vínculo a ellas en tu página principal con <iframe> o como etiquetas <img>, como se muestra a continuación.
Aquí tienes ejemplos de cómo usar POST con JavaScript y PHP.
Cómo usar JavaScript para una solicitud POST
La forma más fácil de realizar una solicitud POST de JavaScript es crear una página que aloje un formulario con datos de gráfico en elementos <input> y hacer que la página POST la solicitud en su controlador onLoad(), y la página se reemplazará por el gráfico PNG. La página que aloja este gráfico debe incluir esta página con un <iframe>.
Este es el código de 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 cadenas (aunque igualmente deberás usar caracteres especiales, como |, para crear un retorno de carro en los títulos del gráfico).
Este gráfico se puede cargar en otra página mediante un <iframe> en tu página de host, de la siguiente manera:
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Cómo usar PHP para una solicitud POST
La mayoría de los lenguajes del servidor admiten solicitudes POST explícitas. Este es 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 quieres usarlo por tu cuenta, debes personalizar el array $chart para que incluya 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 apuntar a tu página POST con una etiqueta <img>, como se muestra a continuación:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>