Laravel 11 Google Bar Chart Example

Google Charts allows users to create column charts, bar charts, area charts, geo graphical charts and many other charts in Laravel 11 applications.

Let’s start creating a bar chart and retrieving data from a data source and displaying it in it using google charts:

Step 1 – Create Controller

controller named ChartController by using the following command:

php artisan make:controller ChartController

In ChartController.php file, add methods to fetch and pass the data on pie chart view:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ChartController extends Controller
{
    public function index()
    {
        $data = [
            ['Year', 'Sales', 'Expenses'],
            ['2014', 1000, 400],
            ['2015', 1170, 460],
            ['2016', 660, 1120],
            ['2017', 1030, 540],
        ];

        return view('bar-chart', ['data' => $data]);
    }
}

Step 2 – Create Route

In routes/web.php, define a route to handle the data retrieval requests for your chart:

use App\Http\Controllers\ChartController;

Route::get('/chart', [ChartController::class, 'index']);

Step 3 – Create View

Create bar-chart.blade.php file in resources/views folder to render data into BAR CHART on blade view file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 11 Google Bar Chart Example - itcodstuff.com</title>
    <!-- Load Google Charts API -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="bar_chart"></div>
</body>
</html>

Step 4 – Add Google Chart Library in View

In your Blade view file, add the Google Charts API:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Step 5 – Create BAR Chart

In your Blade view file, render data in bar chart using Google Charts API:

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

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

            var options = {
                title: 'Company Performance',
                chartArea: {width: '50%'},
                hAxis: {
                    title: 'Year',
                    minValue: 0
                },
                vAxis: {
                    title: 'Sales and Expenses'
                }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>

Step 6 – Test

Run application using artisan command:

php artisan serve

Hit http://localhost:8000/chart url on browser for testing.