série gráficos

Criando gráficos com ChartJS e CodeIgniter

Atendendo a vários pedidos atualizamos o tutorial sobre integração de ChartJS e CodeIgniter, agora explicando o código do exemplo que está disponível no GitHub.

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 ChartsJS, com o CodeIgniter.

Montando o ambiente

Para o exemplo usamos uma estrutura personalizada, específica para os exemplos, mas que disponibilizamos no GitHub. Então você pode acessar o tutorial a seguir para ver como instalar e utilizar a nossa estrutura personalizada.

Instalando a estrutura padrão de tutoriais do portal

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

Você precisará alterar os serguintes arquivos:

  • config/routes.php
  • controllers/Base.php
  • views/home.php
  • views/commons/cabecalho.php

Além das alterações você precisará criar um arquivo em assets/js chamado scripts.js que conterá a parte de javascript para renderização dos gráficos.

A seguir vamos ver cada um dos arquivos utilizados.

config/routes.php

Nesse arquivo são configuradas as rotas da aplicação, onde são definidas as rotas das views e também as rotas das requisições de dados feitas via AJAX no arquivo assets/js/scripts.js.

controllers/Base.php

O controlador é o cérebro desse exemplo, nele são preparados os dados para geração dos gráficos e também carregadas as views de cada uma das páginas de gráficos.

Os métodos que retornam um JSON com os dados para o gráfico estão usando as configurações de variáveis que o ChartJS descreve nos exemplos e documentação.

views/commons/cabecalho.php

Nesse arquivo fazemos as chamadas para os scripts necessários para a geração dos gráficos e uso dos recursos da biblioteca ChartJS.

views/home.php

Nessa view temos os links para os 4 tipos de gráficos que são utilizados no exemplo.

assets/js/scripts.js

Esse arquivo é quase que um “irmão gêmeo” do controller Base.php, pois ele é o responsável por solicitar os dados para geração do gráfico ao controller através de uma requisição AJAX, e renderizar os gráficos após obter os dados.

A biblioteca de gráficos ChartJS 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 ChartJS e conheça os outros tipos de gráficos disponíveis.

Esse é apenas um dos muitos tipos de gráficos que a biblioteca ChartJS disponibiliza. No código-fonte de exemplo você poderá ver esse gráfico e outros 3 tipos diferentes.

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