Chris B. – idéias e pensamentos

Não tem jeito mais simples de inserir um gráfico na sua página do que usando a API do Google Charts.

E se você usa Prototype, para facilitar ainda mais tem esse plugin que transforma a inserção muito mais clara!

Só é necessário incluir os .js da Prototype e do próprio plugin:

<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”GoogleChartAPI.prototype.js”></script>

instanciar o objeto da classe GoogleChart e usar os métodos adequados (escolhendo o tipo de gráfico, dados, label, etc…):

var g=new GoogleChart();
g.init(‘chart-01′); //Target Div ID
g.setChartType(‘p3′);
g.setChartTitle(‘Pie Chart Example’);
g.setChartSize(‘450×140′);
g.setChartColors(‘FFFF00,000066,0000cc,0000ff’);
g.setChartData([[10,15,25,50]]);
g.setLabels(‘Data 1 (10%) | Data 2 (15%) | Data 3 (25%) | Data 4 (50%)’);
g.drawChart();

sem se esquecer de incluir uma div com o mesmo id definido no parâmetro enviado para o método init():

<div id=”chart-01″></div>

Simples!

Obs.: escrevi esse post algum tempo atrás sobre a API do Google Chart

9 da noite, a horas trabalhando, você vai lá, vai criar uma pasta pelo Eclipse para colocar alguns arquivos e… ele avisa que a pasta já existe.

Mas, ahmmm? A-lá, dentro da pasta indicada, não tem nenhuma outra chamada mailTemplates, vendo pelo navigator do Eclipse. E eu até abri pelo fileSystem e não tinha a pasta. Mas o Eclipse indicava que tinha! Ou seja, algum pau relacionado ao SVN… que beleeeeeza!

Estava ontem adaptando uma interface que usa o plugin jCarousel (da jQuery) quando, num teste, veio a seguinte mensagem de erro:

De cara fiquei surpreso: é muito difícil pegar por aí uma implementação em javascript que tenha preocupação com os possíveis erros antes deles acontecerem.
Depois, comecei a me lembrar de alguns sites – tageados no meu del.icio.us – sobre mensagens de erros bizarras, como esses…

Já faz alguns meses que tive a idéia de criar uma biblioteca PHP, opensource, para facilitar as interações entre javascript e PHP. Batizei a mesma de JS Calls PHP, e com ela é possível acessar métodos de classes PHP de uma forma simples, com sintaxe clara e orientada a objetos.

Veja a página completa da biblioteca aqui.

Então resolvi criar uma série de posts onde vou mostrar o que é possível fazer com essa biblioteca. Basicamente, ela possibilita qualquer interação da interface com o backend desde que esse seja em PHP e o que você quiser que interaja esteja orientado a objetos.
Vale ressaltar que sempre me perguntam se é uma biblioteca AJAX; tecnicamente falando, não, ela não é. Ela utiliza requisicões assíncronas via javascript com troca de dados no formato JSON, e não dá suporte nenhum a manipulação DOM, como uma jQuery ou Prototype faz. Mas o que nela é diferente do que tem por aí? Possibilita você acessar métodos do PHP, colocando toda abstração de orientação a objetos (nome_da_classe.nome_do_metodo([argumentos])) sem precisar utilizar, por exemplo. o método load() ou $.ajax() da jQuery ou a classe Ajax da Prototype passando URLs inteiras como caminho.

Nesse primeiro post, criei uma rotina que chama via javascript um método de uma classe do PHP que recebe três parâmetros: largura, altura e um texto e cria no sistema de arquivos uma imagem com fundo preto e o texto passado como parâmetro em vermelho, e quando ela acaba de ser executada, no javascript dou reload na imagem.

Veja o exemplo rodando aqui.

Utilizei esse exemplo que postei no O Desenvolvedor de manipulação de imagens no PHP com a biblioteca GD como base.

Código da classe:

<?php
class GDTest {
function __construct() {

}

function createImageWithText($width, $height, $txt) {
//cria uma imagem com largura x altura definida pelo usuário
$im = imagecreatetruecolor($width, $height);
//aloca as cores para imagem
$text_color = imagecolorallocate($im, 233, 14, 91);
//escreve o texto na imagem
imagestring($im, 1, 5, 5,  $txt, $text_color);

//iunicia buffer
ob_start();
// cria imagem de saída, formato jpeg, bom 85% de qualidade
imagejpeg($im, NULL, 85);
//captura saída para string
$contents = ob_get_contents();
//finaliza captura
ob_end_clean();
//libera memória
imagedestroy($im);
//escreve arquivo em disco, usando os comando básicos do PHP
$fh = fopen(“temp/img2.jpg”, “w+” );
fwrite( $fh, $contents );
fclose( $fh );
return true;

}

}

?>

Então expus essa classe na JS Calls PHP sob o nome gd e habilitei o método a ser acessado, no arquivo de configuração (config.php) e criei o html que faz essa chamada.

<html>
<head>
<script type=”application/javascript” src=”../engine.js”></script>
<script type=”application/javascript” src=”../interface/gd.js”></script>
<script type=”application/javascript”>

function getImg() {
gd.createImageWithText(300, 100, document.getElementById(“texto”).value, function(cb) {
if(cb) {

document.getElementById(“myImage”).src = “../temp/img2.jpg?date=” + new Date();
}
});
}

</script>
</head>
<body>
<h1>JS Calls PHP</h1>
<h2>Exemplo de uso</h2>
<label for=”texto”>Seu texto:</label><input type=”text” name=”texto” id=”texto” />
<a href=”#” onClick=”getImg(); return false;”>criar/atualizar imagem</a><br /><br />
<img src=”#” id=”myImage” />
</body>
</html>

Espero que o exemplo tenha ficado bem explicado e que seja de utilidade. Se tiverem dúvidas ou sugestões de exemplos, enviem

Post just for fun… que só aqueles que trabalham com javascript diariamente vão acabar achando graça mesmo

Mais da saga #fail! Dois prints tirados semana passada, um deles no site da Via6 (agregador de blogs) e outro no do projeto Hibernate…

Página de envio de URL do Via6 com um texto solto na tela... provavelmente o programador esqueceu de tirar

Home do site do Hibernate baleiando...