How to implement Google Chart in Laravel

Implement Google Chart in Laravel

Why Charts ? For styling ? No. For Visualizing data ? Yes. When it comes to visualize large data statistics charts are very useful. Its very helpful for businesses to know about their product trends, users and many more things. Charts are very simple yet very powerful option to show data statistics.

There are many type of charts available and many of the service providers out there who were providing charts services one of them is Google charts. Google chart provides a very beautiful chart options to visualize and monitor your data statistics. It's a JavaScript-based charting library by Google that helps you create dynamic visualizations like pie charts, bar charts, line charts, and more — all for free! 🎉

In this article we will see how to integrate google charts in Laravel. I have table having users activities and time spent by them, we will use that table for making charts. We will implement multiple google charts using these data to visualize our data.

In this blog, you’ll learn:

✅ What is Google Chart

💡 Why Google Chart is useful

⚙️ How to implement it in Laravel

🧑‍💻 Real example with Blade and Controller

🚀 Tips and final thoughts

Here are a few reasons why Google Chart is a great tool:

🎨 Interactive UI – Hover effects, tooltips, and smooth transitions.

📈 Multiple chart types – Pie, Line, Bar, Geo, Gauge, etc.

📱 Responsive – Works well on all devices.

💼 Great for dashboards – Show analytics and reports with clarity.

📌 Table Data (daily_activities)

📌 Step 2: Create Route

Route::get('/chart', [ChartController::class, 'index'])->name('chart.index');

📌 Step 2: ChartController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\DailyActivity;
use DB;

class ChartController extends Controller
{
    public function index()
    {
        $data = DailyActivity::select('activity', DB::raw('SUM(time_spent) / 60 as hours')) // convert minutes to hours
            ->groupBy('activity')
            ->get()
            ->map(function ($item) {
                return [$item->activity, round($item->hours, 2)];
            })
            ->prepend(['Task', 'Hours per Day']) // prepend header
            ->values();

        $data->toArray();

        return view('chart.index', compact('data'));
    }
}

📌 Step 2: index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Google Charts in Laravel - TheDevNerd</title>
    <!-- Bootstrap for Styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google Charts Loader -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
        google.charts.load('current', { packages: ['corechart'] });
        google.charts.setOnLoadCallback(drawCharts);

        function drawCharts() {
            var data = google.visualization.arrayToDataTable(@json($data));

            // Chart options
            var pieOptions = {
                title: '🍕 Pie Chart (3D)',
                is3D: true
            };

            var columnOptions = {
                title: '📊 Column Chart'
            };

            var barOptions = {
                title: '📋 Bar Chart',
                bars: 'horizontal'
            };

            var donutOptions = {
                title: '🍩 Donut Chart',
                pieHole: 0.4
            };

            // Draw Charts
            new google.visualization.PieChart(document.getElementById('pie_chart')).draw(data, pieOptions);
            new google.visualization.ColumnChart(document.getElementById('column_chart')).draw(data, columnOptions);
            new google.visualization.BarChart(document.getElementById('bar_chart')).draw(data, barOptions);
            new google.visualization.PieChart(document.getElementById('donut_chart')).draw(data, donutOptions);
        }
    </script>
</head>
<body>
    <div class="container my-5">
        <h2 class="text-center mb-4">📊 Google Charts with Laravel</h2>

        <div class="row mb-4">
            <div class="col-md-6">
                <div id="pie_chart" style="width: 100%; height: 400px;"></div>
            </div>
            <div class="col-md-6">
                <div id="column_chart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div id="bar_chart" style="width: 100%; height: 400px;"></div>
            </div>
            <div class="col-md-6">
                <div id="donut_chart" style="width: 100%; height: 400px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

Stunning Output

🧠 Real-Time Use Cases

Here’s how Google Charts is useful in real projects:

📊 Admin Dashboard Show sales, user growth, or product performance

📦 E-commerce Visualize orders by category, location, etc.

📅 Task Manager Show task completion or time tracking

🧾 Reports Replace boring tables with clear graphs

🧪 Analytics Show website visits, engagement, or user behavior

⚠️ Tips

You can change chart type like: google.visualization.BarChart, LineChart, ColumnChart, etc.

Always sanitize or format the backend data into the expected format: [["Label", "Value"], ...]

You can pull data from DB and loop it using Blade before passing to chart.

✅ Summary

Google Charts is a lightweight, powerful, and easy-to-integrate charting library for Laravel apps. You don’t need to install any Laravel package — just use the script and you’re ready to visualize the charts.

Thank you for reading this article 😊

For any query do not hesitate to comment 💬