High Charts
8
Gerando gráficos com PHP e highcharts.com Alô Comunidade PHP! Neste artigo eu pretendo mostrar como preencher uma lacuna no desenvolvimento de aplicativos gerenciais que dependem de 2 gráficos importantes: Pizza e Linhas. Soluções como o PHPLot funcionam, mas não dão o resultado esperado. Vamos lá? 1 - Introdução: Sempre que posso eu pesquiso alguma forma nova de fazer o meu trabalho, uma forma nova de aumentar minha produtividade. Ultimamente tenho estudado SCRUM, técnica pomodoro e outras formas de realizar autogerenciamento sem que isso se torne um parto. Tive uma última demanda por gráficos para os meus projetos, um aplicativo de controle dos meus contratos e também um de finanças pessoais (que posso comentar em outros artigos) e os implementei num primeiro momento com o PHPLot que é fácil, leve e dá um bom resultado, porém não era ainda o que eu queria. Eu queria mesmo era uma coisa parecida com os gráficos do Google Analytics, ou seja, algo em javascript, de preferência Jquery. Procurando encontrei o highcharts (hicharts.com). Como eu sempre evito parar pra escrever código javascript, automatizo a criação do resultado com PHP. Crio uma classe em PHP que faça a parte chata do trabalho, ou seja, gerar o código javascript, chamar o arquivo do plugin etc. Resultado: produtividade lá em cima. 2 – A situação do gráfico de linhas: Pensa naquele gráfico bonito mostrando o andamento de uma situação, seja ela o saldo atual de suas contas, o desenvolvimento de um trabalho, a cotação do dólar etc. Essas são situações exemplo para a utilização desse tipo de gráfico e que são facilmente resolvíveis com o highcharts e com PHP. Os dados a serem passados são poucos, o resultado é ótimo. Vamos exemplificar aqui uma série de quinze dias de resultados de saldos de uma determinada conta, pode ser uma poupança, uma conta banco movimento ou qualquer que você queira usar como exemplo para reproduzir. Os resultados serão, aqui, do dia primeiro ao décimo quinto dia de um dados mês onde os dados serão apresentados em forma de um array, onde o índice do array que contém os dados é o legenda para essa série e nos arrays aninhados o valor do índice zero é o dia e do índice hum valor é o saldo. Entendido? Vamos aos dados então: $dados = array('Saldo'=>array( array(1, 900 ), array(2, 1205 ), array(3, 1351 ), array(4, 1300 ), array(5, 1285 ), array(6, 1555 ), array(7, 2001.5 ), array(8, 1916.15 ), array(9, 1894 ), array(10, 2201 ), array(11, 1863.81 ), array(12, 3332.21 ), array(13, 3332.21 ), array(14, 3110.21 ), array(15, 2900.21 )
-
Upload
evaldo-barbosa -
Category
Documents
-
view
689 -
download
2
description
Neste artigo você pode conferir como criar gráficos utilizando php e tendo o resultado HTML E JS.
Transcript of High Charts
Gerando gráficos com PHP e highcharts.com
Alô Comunidade PHP! Neste artigo eu pretendo mostrar como preencher uma lacuna no desenvolvimento de aplicativos gerenciais que dependem de 2 gráficos importantes: Pizza e Linhas. Soluções como o PHPLot funcionam, mas não dão o resultado esperado. Vamos lá?
1 - Introdução:Sempre que posso eu pesquiso alguma forma nova de fazer o meu trabalho, uma
forma nova de aumentar minha produtividade. Ultimamente tenho estudado SCRUM, técnica pomodoro e outras formas de realizar autogerenciamento sem que isso se torne um parto. Tive uma última demanda por gráficos para os meus projetos, um aplicativo de controle dos meus contratos e também um de finanças pessoais (que posso comentar em outros artigos) e os implementei num primeiro momento com o PHPLot que é fácil, leve e dá um bom resultado, porém não era ainda o que eu queria. Eu queria mesmo era uma coisa parecida com os gráficos do Google Analytics, ou seja, algo em javascript, de preferência Jquery. Procurando encontrei o highcharts (hicharts.com).
Como eu sempre evito parar pra escrever código javascript, automatizo a criação do resultado com PHP. Crio uma classe em PHP que faça a parte chata do trabalho, ou seja, gerar o código javascript, chamar o arquivo do plugin etc. Resultado: produtividade lá em cima.
2 – A situação do gráfico de linhas:Pensa naquele gráfico bonito mostrando o andamento de uma situação, seja ela o
saldo atual de suas contas, o desenvolvimento de um trabalho, a cotação do dólar etc. Essas são situações exemplo para a utilização desse tipo de gráfico e que são facilmente resolvíveis com o highcharts e com PHP. Os dados a serem passados são poucos, o resultado é ótimo.
Vamos exemplificar aqui uma série de quinze dias de resultados de saldos de uma determinada conta, pode ser uma poupança, uma conta banco movimento ou qualquer que você queira usar como exemplo para reproduzir. Os resultados serão, aqui, do dia primeiro ao décimo quinto dia de um dados mês onde os dados serão apresentados em forma de um array, onde o índice do array que contém os dados é o legenda para essa série e nos arrays aninhados o valor do índice zero é o dia e do índice hum valor é o saldo. Entendido?
Vamos aos dados então:$dados = array('Saldo'=>array(
array(1, 900 ), array(2, 1205 ), array(3, 1351 ), array(4, 1300 ), array(5, 1285 ), array(6, 1555 ), array(7, 2001.5 ), array(8, 1916.15 ), array(9, 1894 ), array(10, 2201 ), array(11, 1863.81 ), array(12, 3332.21 ), array(13, 3332.21 ), array(14, 3110.21 ), array(15, 2900.21 )
));
3 – A classe LineChart Para solucionar o problema vamos criar a class LineChart (no meu caso eu a
estendo de outra class, a TSWObject, mas isso aqui não vem ao caso, o resultado não depende diretamente disso). A implementação é a seguinte:<?php /** * LineChart * Classe que implementa a abstração de gráficos highcharts.com para * gráfico de linhas. * * @author Evaldo Barbosa <[email protected]> */ class LineChart /*extends TSWObject*/ {
private $container; private $title; private $subtitle; private $yAxis; private $series; /** * Construtor da classe. * @param array $conf Array com as configurações para que o gráfico funcione. * As chaves desse array deve ser iguais aos nomes dos atributos internos dessa
classe. * Perceba que o índice title pode ter mais de um índice, equivalentes a título e
subtítulo respectivamente. * @return void */ function __construct($conf) {
$this->title = $conf['title'][0]; $this->subtitle = $conf['title'][1]; $this->container = $conf['container']; $this->series = $conf['series']; $this->yAxis = $conf['y'];
} /** * Método que gera os dados e os retorna para implementação na página. * @return string */ function render() {
//A linha abaixo foi comentada porque a mesma chama uma outra classe //que uso para facilitar a geração das minhas tags internas do header //da página como tags de chamadas de arquivos CSS <link> //de chamadas de arquivos JS ou códigos JS personalizados sob demanda //que nela chamo de LiveScripts. Idéia para outro artigo! //Header::addJSFile("linechart","/js/highcharts/highcharts.js"); $series = array(); $data = array();
$axis = array(); foreach ( $this->series as $key=>$row ) {
$data[$key] = array(); foreach( $row as $_row ) {
$axis[] = $_row[0]; $data[$key][] = $_row[1];
} } $axis = "'" . implode("','",$axis) . "'"; foreach( $data as $key=>$row ) {
$i = implode(",",$row); $series[] = "{name:'{$key}',data:[{$i}]}";
} $series = implode(",",$series); $str = "chart = new Highcharts.Chart({
chart: { renderTo: '{$this->container}', defaultSeriesType: 'line', marginRight: 130, marginBottom: 25
}, title: {
text: '{$this->title}', x: -20 //center
}, subtitle: {
text: '{$this->subtitle}', x: -20
}, xAxis: {
categories: [{$axis}] }, yAxis: {
title: { text: '{$this->yAxis['title']}'
}, plotLines: [{
value: 0, width: 1, color: '#808080'
}] }, tooltip: {
formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y; }
}, legend: {
layout: 'vertical',
align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0
}, series: [{$series}]
}); "; //Lembra que falei do LiveScript? //Header::addLiveScript( $str ); return $str
} } ?>
A implementação original foi modificada para que não houvesse dependência em relação a nenhum outro arquivo ou classe do meu framework, salve o código acima num arquivo chamado linechart.php, iremos usá-lo em breve. Vamos agora ao HTML que receberia esse o resultado desse código.
Chamemos o arquivo de linechart_exemplo.php que conterá o código PHP que usará a classe anterior e também o HTML que será a interface com o gráfico. Vamos ao código!<html><head><title>Exemplo de LineCharts com PHP e Highcharts</title><!-- LEMBRE-SE DE BAIXAR OS ARQUIVOS DO JQUERY E HIGHCHARTS.COM /--><script src=”js/jquery.js”></script><script src=”js/highcharts.js”></script><script><?require(“linechart.php”);$dados = array('Saldo'=>array( array(1, 900 ), array(2, 1205 ), array(3, 1351 ), array(4, 1300 ), array(5, 1285 ), array(6, 1555 ), array(7, 2001.5 ), array(8, 1916.15 ), array(9, 1894 ), array(10, 2201 ), array(11, 1863.81 ), array(12, 3332.21 ), array(13, 3332.21 ), array(14, 3110.21 ), array(15, 2900.21 ) )); $charts = new LineChart(array(
"title" => array("Seu desempenho nos últimos 15 dias","Acompanhamento diário"),
"container" => "container",
"y" => array( "title"=>"Em R$"
), "series" => $dados
)); ?> $(document).ready(function() {
<? echo $charts->render(); ?> });</script></head>
<body><div id=”container”><!-- AQUI FICARÁ O GRÁFICO /--></div>
</body>
</html>
De posso do HTML e do código que gera o gráfico, mãos à obra!
Visto o resultado, vamos ao próximo gráfico.
4 – A situação do gráfico pizza:Essa é uma situação bem corriqueira e simples de pensar e resolver. A
circunferência completa equivale a 100% e cada categoria dada tem a sua porcentagem. Um exemplo é a distribuição de gastos entre categorias como alimentação, lazer, transporte etc.
Para esse gráfico a abordagem é bem parecida à abordagem anterior, ou seja, os dados serão passados como um array. Vamos a ele:$dados = array( array("FREE LANCE",8.87), array("SALARIOS",84.01), array("Poupança",7.12)) ;
5 – A classe PieChart:Como no exemplo anterior vamos criar uma classe, dessa vez a PieChart, que
desempenhará o mesmo papel de abstrair o javascript facilitando a geração do gráfico sem ter que meter a mão direto no Jquery. O código segue abaixo:<?php /** * PieChart * Classe que implementa a abstração de gráficos highcharts.com para
* gráfico tipo pizza. * * @author Evaldo Barbosa <[email protected]> */ class PieChart extends TSWObject {
private $container; private $title; private $subtitle; /** * Construtor da classe. * @param array $conf Array com as configurações para que o gráfico funcione. * As chaves desse array deve ser iguais aos nomes dos atributos internos dessa
classe. * Perceba que o índice title pode ter mais de um índice, equivalentes a título e
subtítulo respectivamente. * @return void */ function __construct($conf) {
$this->title = $conf['title'][0]; $this->subtitle = $conf['title'][1]; $this->container = $conf['container']; $this->series = $conf['series'];
} /** * Método que gera os dados e os retorna para implementação na página. * @return string */ function render() {
$series = array(); foreach ( $this->series as $row ) {
$row[1] = sprintf("%01.2f",$row[1]); $series[] = "['{$row[0]}',{$row[1]}]";
} $series = implode(",",$series); //Header::addJSFile("piechart","/js/highcharts/highcharts.js"); $str = "chart = new Highcharts.Chart({
chart: { renderTo: '{$this->container}', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false
}, title: {
text: '{$this->title}' }, tooltip: {
formatter: function() { return '<b>'+ this.point.name +'</b>: '+
this.y +' %';
} }, plotOptions: {
pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: {
enabled: false }, showInLegend: true
} },
series: [{ type: 'pie', name: '{$this->subtitle}', data: [{$series}]
}] });";
//Lembra que falei do LiveScript? //Header::addLiveScript( $str ); return $str;
} } ?>
O código HTML para este exemplo é muito semelhante ao outro, a diferença fica a cargo somente no array de dados e na chamada para a classe PieChart. Mas para que não fique muito vago, apresentarei o bloco onde haverá a mudança. Veja o código que será modificado no header:<script> <? require('piechart.php'); $dados = array( array("FREE LANCE",8.87), array("SALARIOS",84.01), array("Poupança",7.12)) ; $charts = new PieChart(array(
"title" => array("Visão geral das suas receitas","Distribuição por categoria"), "container" => "container", "series" => $dados
)); ?> $(document).ready(function() {
<? echo $charts->render(); ?> }); </script>
Salve esse código como piecharts_exemplo.php e rode no seu browser, o resultado será assim:
6 – Conclusão:Todos sabemos que gráficos deixam a informação mais elegante e mais fáceis de
ler. Gráficos com informações consistentes fazem com que o gestor possa tomar decisões mais rapidamente sem analisar uma massa de dados, pois a função que eles desempenham é justamente a de sintetizar uma visão tirada de uma amostra de dados.
Fazer com que o PHP automatize a tarefa chata de incluir o Javascript dentro de uma pa ina HTML ao estilo macarrão, ou mesmo dentro de um template Smarty ou outraǵ suite de templates cria, além da sensação de poder fazer mais rápido, uma melhor estrutura para manutenção do código.
A todos aqueles que tiverem dúvidas ou sugestões a fazer para as classes podem entrar em contato comigo através de e-mail ou então podem me encontrar no twitter em @evaldobarbosa para trocarmos ideias.
Aguardem outros artigos.
