Como criar gráficos da dados reais do banco de dados com Laravel
Para criar gráficos com dados reais do banco de dados no Laravel, você pode usar bibliotecas de gráficos modernas como Chart.js, Highcharts, ou ApexCharts. Essas bibliotecas podem ser integradas ao Laravel para gerar gráficos dinâmicos baseados nos dados recuperados do banco.
Aqui está um passo a passo detalhado para criar gráficos com Chart.js usando dados reais do banco de dados no Laravel.
1. Configurar o Banco de Dados
Certifique-se de que você tem uma tabela com os dados que deseja visualizar em gráficos. Por exemplo, suponha que você tenha uma tabela de vendas (sales) com a seguinte estrutura:
Estrutura da tabela sales
CREATE TABLE sales (
id INT AUTO_INCREMENT PRIMARY KEY,
product_name VARCHAR(255) NOT NULL,
quantity_sold INT NOT NULL,
sale_date DATE NOT NULL,
created_at TIMESTAMP NULL,
updated_at TIMESTAMP NULL
);
Exemplo de dados na tabela:
| ID | Product Name | Quantity Sold | Sale Date |
|---|---|---|---|
| 1 | Produto A | 50 | 2024-12-01 |
| 2 | Produto B | 20 | 2024-12-02 |
| 3 | Produto C | 30 | 2024-12-03 |
2. Criar um Controlador
Crie um controlador para buscar os dados do banco:
php artisan make:controller ChartController
No arquivo app/Http/Controllers/ChartController.php, adicione o seguinte código para buscar os dados:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class ChartController extends Controller
{
public function index()
{
// Buscar os dados do banco de dados (exemplo: vendas por produto)
$sales = DB::table('sales')
->select('product_name', DB::raw('SUM(quantity_sold) as total_sales'))
->groupBy('product_name')
->get();
// Passar os dados para a view
return view('charts.index', compact('sales'));
}
}
Aqui estamos agrupando os dados de vendas por produto (GROUP BY product_name) e somando as quantidades vendidas (SUM(quantity_sold)).
3. Criar uma Rota
Adicione uma rota no arquivo routes/web.php para acessar o gráfico:
use App\Http\Controllers\ChartController;
Route::get('/charts', [ChartController::class, 'index']);
4. Criar a View
Crie a view resources/views/charts/index.blade.php para exibir o gráfico usando Chart.js.
Código da View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gráfico de Vendas</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Gráfico de Vendas</h1>
<canvas id="salesChart" width="400" height="200"></canvas>
<script>
// Dados passados do Laravel para o JavaScript
const labels = @json($sales->pluck('product_name')); // Nomes dos produtos
const data = @json($sales->pluck('total_sales')); // Total de vendas
// Configuração do gráfico
const ctx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(ctx, {
type: 'bar', // Tipo do gráfico: barras
data: {
labels: labels, // Rótulos (nomes dos produtos)
datasets: [{
label: 'Vendas por Produto',
data: data, // Dados (quantidade de vendas)
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true // Começar no zero
}
}
}
});
</script>
</body>
</html>
Explicação:
- Script Chart.js: Incluímos o script do Chart.js via CDN.
- Laravel para JavaScript:
- Usamos
@json($sales->pluck('product_name'))para passar os nomes dos produtos. - Usamos
@json($sales->pluck('total_sales'))para passar o total de vendas.
- Usamos
- Gráfico de Barras: Configuramos um gráfico de barras que usa os nomes dos produtos como rótulos e o total de vendas como valores.
5. Testar o Gráfico
Inicie o servidor do Laravel:
php artisan serve
Acesse a URL:
http://localhost:8000/charts
Você verá o gráfico de vendas exibindo os dados do banco.
6. Melhorias e Personalizações
6.1. Outros Tipos de Gráficos
O Chart.js suporta vários tipos de gráficos, como:
- Linha (
line) - Pizza (
pie) - Radar (
radar) - Área (
polarArea)
Para mudar o tipo, basta alterar a propriedade type:
type: 'pie', // Exemplo de gráfico de pizza
6.2. Filtrar Dados
Você pode adicionar filtros para o gráfico, como selecionar um intervalo de datas. Edite o controlador para receber parâmetros de filtro:
public function index(Request $request)
{
$startDate = $request->input('start_date', '2024-01-01');
$endDate = $request->input('end_date', now());
$sales = DB::table('sales')
->select('product_name', DB::raw('SUM(quantity_sold) as total_sales'))
->whereBetween('sale_date', [$startDate, $endDate])
->groupBy('product_name')
->get();
return view('charts.index', compact('sales', 'startDate', 'endDate'));
}
No formulário da view:
<form method="GET" action="/charts">
<label for="start_date">Data Inicial:</label>
<input type="date" name="start_date" value="{{ $startDate }}">
<label for="end_date">Data Final:</label>
<input type="date" name="end_date" value="{{ $endDate }}">
<button type="submit">Filtrar</button>
</form>
6.3. Carregar Dados via AJAX
Para gráficos dinâmicos, você pode carregar dados do backend usando AJAX:
fetch('/api/sales-data')
.then(response => response.json())
.then(data => {
// Atualizar o gráfico com novos dados
salesChart.data.labels = data.labels;
salesChart.data.datasets[0].data = data.values;
salesChart.update();
});
No Laravel, crie uma rota para retornar os dados em JSON:
Route::get('/api/sales-data', function () {
$sales = DB::table('sales')
->select('product_name', DB::raw('SUM(quantity_sold) as total_sales'))
->groupBy('product_name')
->get();
return response()->json([
'labels' => $sales->pluck('product_name'),
'values' => $sales->pluck('total_sales'),
]);
});
Com isso, você pode criar gráficos dinâmicos e interativos no Laravel! Se precisar de mais ajuda ou personalizações, é só pedir.