A especificação do gráfico como um URL no navegador ou uma tag <img> é chamada de solicitação GET. Fazer uma solicitação GET é simples, mas os URLs GET têm limite de 2.000 caracteres. E se você tiver mais dados que isso?
Por sorte, a API de gráficos do Google suporta HTTP POST para solicitações de gráficos de até 16.000 caracteres. Por outro lado, o POST é mais complicado de usar.
Este é um exemplo do tipo mais básico de solicitação POST: usando um elemento <form>:
Este gráfico é, na verdade, uma página hospedada em um <iframe>. Este é o código do formulário:
<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>
A resposta para uma solicitação POST válida é um gráfico PNG, assim como uma resposta de solicitação GET.
Existem várias maneiras de usar POST, e todas elas exigem codificação adicional, seja no código da página ou no servidor que hospeda a página. Para usar POST, crie uma página separada para cada gráfico e incorpore ou vincule essas páginas na sua página principal usando <iframe> ou como tags <img>, conforme mostrado abaixo.
Veja alguns exemplos de como usar o POST tanto com JavaScript quanto com PHP.
Como usar JavaScript para uma solicitação POST
A maneira mais fácil de fazer uma solicitação POST JavaScript é criar uma página que hospede um formulário com dados de gráfico em elementos <input> e faça com que a página use POST para a solicitação no gerenciador onLoad(). Assim, a página será substituída pelo gráfico PNG. A página que hospeda esse gráfico precisa incluí-la usando um <iframe>.
Este é o código da página do 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>
Ao usar um elemento <form>, não é necessário codificar para URL as strings, embora você ainda precise usar caracteres especiais, como | para criar um retorno de carro nos títulos do gráfico.
Esse gráfico pode ser carregado em outra página usando um <iframe> na página host, assim:
another_page.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Como usar PHP para uma solicitação POST
A maioria das linguagens dos servidores suporta solicitações POST. Veja um exemplo de como fazer uma solicitação POST usando PHP. Este exemplo demonstra uma página que gera um gráfico de linhas com 150 valores aleatórios. Para usar isso por conta própria, personalize a matriz $chart para incluir seus próprios valores.
chartserver-image.php (link em inglês)
<?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 esse gráfico é mais fácil do que o exemplo em JavaScript, porque basta
apontar para a página POST com uma tag <img>, como mostrado aqui:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>