Especificar seu gráfico como um URL no navegador ou uma tag <img>
é chamado de solicitação GET. Fazer uma solicitação GET é simples, mas os URLs GET são limitados a 2 mil 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.
Veja um exemplo do tipo mais básico de solicitação POST: usando um elemento <form>:
Na verdade, esse gráfico é hospedado em uma <iframe>. Veja
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, da mesma forma que uma resposta de solicitação GET.
Há várias maneiras de usar o POST e todas exigem a codificação
adicional no código da página ou no servidor
que hospeda a página. Para usar o POST, normalmente você cria uma página separada
para cada gráfico e incorpora ou vincula essas páginas na
página principal usando <iframe> ou como uma tag <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 fazer com que a página
POST a solicitação no gerenciador onLoad(), e a página será substituída pelo
PNG de gráfico. A página que hospeda esse gráfico precisa incluí-la usando um <iframe>.
Veja o código da página do gráfico:
post_gráfico.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>
Se você usar um elemento <form>, não vai ser necessário codificar as strings para URL, embora ainda seja necessário 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 do host, como este:
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.
graphserver-image.php (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 você pode
apenas apontar para sua página POST com uma tag <img>, conforme mostrado aqui:
another_page.html
<img width='600' height='200' src='chartserver-image.php'>