série gráficos

Criando gráficos com Google Charts e CodeIgniter

O uso de gráficos é muito comum em aplicações web, e os mais utilizados são gerados usando a linguagem JavaScript, combinados com uma linguagem a nível de servidor para prover os dados. Nesse tutorial você aprenderá a integrar a biblioteca de gráficos do google, chamada Google Charts, com o CodeIgniter.

Montando o ambiente

Faça o download e instalação do CodeIgniter. Aqui no portal existem tutoriais ensinando esse processo:

Ao montar a estrutura de arquivos do ambiente, nomeie o diretório do projeto como graficos-com-google-charts.

Ajustando a view

Ao montar o ambiente você terá uma view chamada welcome_message.php. Remova todo o conteúdo que estiver dentro das tags e adicione o conteúdo a seguir:



<div id="my-chart" style="width: 100%; height: 500px;"></div>


<!-- Biblioteca jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- Biblioteca de gráficos do Google Chart -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Script para renderizar o gráfico -->
<script type="text/javascript" src="<?=base_url('assets/js/script.js')?>"></script>

A div my-chart será o container que receberá o gráfico, e os scripts adicionados são a biblioteca jQuery, a biblioteca de gráficos Google Chart e o script que irá renderizar o gráfico ao carregar a página, respectivamente.

Atualizando o controller

Sabendo que serão necessários 2 métodos no controller, e que o controller Welcome já possui um método criado, você só precisará criar o controller que vai retornar os dados JSON para o JavaScript renderizar o gráfico.

Sendo assim, abra o controller Welcome e adicione a ele um novo método chamado Dados, conforme apresentado a seguir:


public function Dados()
{
  $dados['tarefas'] = array(
    'Tarefas' => 'Horas por dia',
    'Trabalho' => 6,
    'Escrever livros e tutoriais' => 4,
    'Redes Sociais' => 2,
    'Assistir TV' => 4,
    'Dormir' => 8
  );
  $dados['opcoes'] = array(
    'title' => 'Atividades Diárias'
  );

  echo json_encode($dados);
}

Esse método vai retornar os dados relacionados às tarefas e opções de configuração do gráfico para o JavaScript, tudo no formato JSON. Repare que os dados estão sendo montados em um array, e no final é utilizada a função json_encode() para transformar o array $dados em um JSON.

O formato dos dados pode variar conforme o tipo de gráfico da biblioteca Google Charts você estiver utilizando. Essa estrutura é para o gráfico Pie Chart.

Agora que o controller está pronto, com todos os métodos necessários, é hora de criar o JavScript que irá recuperar esses dados das tarefas e renderizar o gráfico.

Criando o script para renderizar o gráfico

Para renderizar o gráfico a primeira coisa a ser feita é solicitar os dados ao servidor, em seguida esses dados serão passados para as funções responsáveis por renderizar a estrutura do gráfico na tela.

Crie um arquivo chamado script.js em assets/js (o diretório não existe, você deverá criá-lo na raiz do diretório da aplicação) e adicione a ele o conteúdo a seguir:

$(document).ready(function(){

//Recupera a URL atual e complementa para que seja possível
//obter os dados para montagem do gráfico
var url_data = window.location.href + "/welcome/dados";
//Define a variável que irá receber as tarefas a serem exibidas no gráfico
var tarefas;
//Define a variável que irá receber as opções de configuração do gráfico
var options;

//Requisição AJAX ao servidor para obtenção dos dados
$.ajax({
  type: 'GET',
  url: url_data,
  dataType: 'json',
  success: function(data) {
    tarefas = json2array(data.tarefas);
    options = data.opcoes;
  },
  error: function() {
    alert("Ocorreu um erro ao processar a solicitação.");
  }
});

//Define qual é o pacote de gráficos que será utilizado
google.charts.load('current', {'packages':['corechart']});

//Operações executadas ao iniciar o processamento da biblioteca
google.charts.setOnLoadCallback(function(){
  //Formata os dados para o padrão de exibição do gráfico
  data = google.visualization.arrayToDataTable(tarefas);

  //Estrutura o gráfico para exibição
  var chart = new google.visualization.PieChart(document.getElementById('mychart'));

  //Exibe o gráfico na tela
  chart.draw(data, options);
});

});

//Função para converter o json para array no padrão da biblioteca Google Charts
function json2array(json_data){
  var result = [];
  for(var i in json_data)
    result.push([i, json_data[i]]);

  return result;
}

Feito isso você pode abrir a sua aplicação no browser e verificar se o gráfico exibido é como o da imagem a seguir:

Google Charts - Pie Chart

A biblioteca de gráficos Google Charts utiliza um padrão muito semelhante para os dados dentro dos seus diferentes de tipos de gráficos disponíveis. Nesse tutorial você utilizou dados estáticos, mas é possível você utilizar dados dinâmicos, vindos de um banco de dados ou mesmo de uma API, para montar o seu gráfico. Basta ficar atento ao padrão dos dados que cada tipo de gráfico utiliza.

Acesse a documentação da biblioteca Google Charts e conheça os outros tipos de gráficos disponíveis.

Esse é apenas um dos muitos tipos de gráficos que a biblioteca Google Charts disponibiliza. No código-fonte de exemplo você poderá ver esse gráfico e outros 2 tipos diferentes, além de uma aplicação desse mesmo gráfico só que gerando uma imagem ao invés de renderização em formato HTML.

Acesse o nosso GitHub e veja o código-fonte completo do exemplo, com comentários explicando cada procedimento que foi realizado para a criação dos outros tipos de gráficos.

Demo OnlineDownload do código-fonte no github