M09

Visualização de Dados com Chart.js

Demonstra como transformar dados brutos do JSON Server em gráficos interativos usando a biblioteca Chart.js. Os dados financeiros são agrupados por mês e por categoria para gerar um gráfico de barras empilhadas e um gráfico de pizza.

Conceitos trabalhados

Carregar Chart.js via CDN

<script src="https://cdn.jsdelivr.net/npm/chart.js">
Não requer instalação — disponível diretamente no navegador.

Estrutura de dados do Chart.js

Cada gráfico precisa de labels (eixo X) e datasets (séries de dados), cada uma com cor e valores.

Agrupamento com Set e filter/reduce

[...new Set(data.map(d => d.mes))] extrai valores únicos.
.filter().reduce() soma os valores por grupo.

Canvas HTML5

Chart.js renderiza dentro de um elemento <canvas>. Cada canvas deve ter um ID único referenciado no JavaScript.

Dados do JSON Server

Endpoint: GET /api/lancamentos

json db/db.json → "lancamentos"

[
  { "id": 1, "mes": "Jan/24", "categoria": "Alimentação", "descricao": "Supermercado", "valor": 850 },
  { "id": 2, "mes": "Jan/24", "categoria": "Transporte",  "descricao": "Combustível",  "valor": 320 },
  { "id": 3, "mes": "Jan/24", "categoria": "Lazer",       "descricao": "Cinema",       "valor": 120 },
  { "id": 4, "mes": "Fev/24", "categoria": "Alimentação", "descricao": "Restaurantes", "valor": 740 },
  { "id": 5, "mes": "Fev/24", "categoria": "Transporte",  "descricao": "Uber",         "valor": 280 },
  // ... mais registros por mês e categoria
]

Padrão: dados → gráfico

javascript

// 1. Buscar dados do JSON Server
const data = await fetch('/api/lancamentos').then(r => r.json());

// 2. Extrair dimensões únicas
const meses      = [...new Set(data.map(d => d.mes))];
const categorias = [...new Set(data.map(d => d.categoria))];

// 3. Montar datasets (uma série por categoria)
const datasets = categorias.map((cat, idx) => ({
  label: cat,
  data: meses.map(mes =>
    data.filter(d => d.mes === mes && d.categoria === cat)
        .reduce((acc, cur) => acc + cur.valor, 0)
  ),
  backgroundColor: CORES[idx]
}));

// 4. Criar o gráfico no canvas
new Chart(document.getElementById('meuGrafico'), {
  type: 'bar',
  data: { labels: meses, datasets },
  options: { scales: { y: { beginAtZero: true, stacked: true }, x: { stacked: true } } }
});

Exercícios sugeridos

Adicione um gráfico de linhas mostrando a evolução do gasto total por mês.
Implemente um botão para alternar entre gráfico de barras agrupadas e empilhadas.
Adicione novos lançamentos via formulário (POST) e atualize os gráficos automaticamente.
Exiba a média mensal como uma linha de referência no gráfico de barras.
Adicione tooltips personalizados que mostrem o percentual em relação ao total do mês.