The fundamentals of Chart.js are quite straightforward. First, we must install Chart.js into our project. Depending on the settings of your project, you may be installing it using npm or bower, or you may link to a constructed version via a CDN or clone/build from GitHub. Simply connecting to the created CDN version in the sample's blade file would suffice for this brief example.

A The fundamentals of Chart js are quite straightforward. First, we must install Chart js into our project. Depending on the settings of your project, you may be installing it using npm or bower, or you may link to a constructed version via a CDN or clone/build from GitHub. In our examples, we'll only link to the built-in CDN version for the purposes of this brief demonstration.

We'll just plot the ages of the app users in this case.

We're presuming you've already set up the Laravel auth scaffolding and carried out the required migrations to make a Users table. If not, take a look at the information here or modify it for the model you're using for your chart's data.

Therefore, before creating any users at random, we'll first add an age column to our Users table.

For more information, see our post on how to use faker to create random users, however for this demonstration, let's make a database migration to add an age column by using:

add age to users table php artisan make:migration ?table='users'

To change the up function to: edit this file in the database migrations directory.

Schema::table('Users', function (Blueprint $table) {
$table->int('age')->nullable();
});

Run php artisan migrate after that, and your Users table should now contain an age column.

Visit /database/factories/UserFactory now, and add the following at the end of the array:

'age' is represented by $faker->numberBetween($min = 20, $max = 80),

The complete return is thus:

return [
        'name' => $faker->name,
        'email' => $faker->unique()->safeEmail,
        'email_verified_at' => now(),
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random(10),
        'age' => $faker->numberBetween($min = 20, $max = 80),
    ];

Run the following commands to build a UsersTableSeeder:

make:seeder UsersTableSeeder in PHP

This will produce UsersTableSeeder.php in the database.

The run function should include the following:

factory(App\User::class, 5)->create();

When this is executed, 5 users will be created; modify 5 to the number of users you need.

After that, we must open DatabaseSeeder.php in /database/seeds and uncomment the code in the run() function.

Finally, execute php artisan db:seed. Five new users should appear, each of whom has an age.

For our Charts page, we will now develop a model, controller, views, and routes.

Run the following command in PHP: make:controller ChartController ?model=Chart.

To the file /app/Http/Controllers/ChartController.php, add the following:

use App\User;
use App\Chart;
use DB;
...
public function index()
    {
// Get users grouped by age
$groups = DB::table('users')
                  ->select('age', DB::raw('count(*) as total'))
                  ->groupBy('age')
                  ->pluck('total', 'age')->all();
// Generate random colours for the groups
for ($i=0; $i<=count($groups); $i++) {
            $colours[] = '#' . substr(str_shuffle('ABCDEF0123456789'), 0, 6);
        }
// Prepare the data for returning with the view
$chart = new Chart;
        $chart->labels = (array_keys($groups));
        $chart->dataset = (array_values($groups));
        $chart->colours = $colours;
return view('charts.index', compact('chart'));
    }

The random colour scheme is one example of the exciting things you can do with the controller's data, though you can also specify hardcoded colours if you'd choose.

In /resources/views/charts/, we must now create an index.blade.php file and add the following (depending on your blade setup and layout; here is an example):

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
      <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Chart Example</title>
        <!-- Bootstrap CSS -->
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
       <!-- Fontawesome CSS -->
</head>
      <body>
<div class="container">
      <div class="row">
          <div class="col-md-12">
              <div class="panel panel-default">
                  <div class="panel-heading my-2">Chart Demo</div>
                    <div class="col-lg-8">
                                            <canvas id="userChart" class="rounded shadow"></canvas>
                  </div>
              </div>
          </div>
      </div>
  </div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- CHARTS -->
<script>
    var ctx = document.getElementById('userChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'bar',
// The data for our dataset
        data: {
            labels:  {!!json_encode($chart->labels)!!} ,
            datasets: [
                {
                    label: 'Count of ages',
                    backgroundColor: {!! json_encode($chart->colours)!!} ,
                    data:  {!! json_encode($chart->dataset)!!} ,
                },
            ]
        },
// Configuration options go here
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        callback: function(value) {if (value % 1 === 0) {return value;}}
                    },
                    scaleLabel: {
                        display: false
                    }
                }]
            },
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    fontColor: '#122C4B',
                    fontFamily: "'Muli', sans-serif",
                    padding: 25,
                    boxWidth: 25,
                    fontSize: 14,
                }
            },
            layout: {
                padding: {
                    left: 10,
                    right: 10,
                    top: 0,
                    bottom: 10
                }
            }
        }
    });
</script>
</body>
</html>

Finally, we need to add the following to /routes/web.php: Route::get('/charts', 'ChartController@index')->name('charts');

Go to at your-project-name.test/charts now.

Although this should serve as a good starting point for your understanding of the fundamentals of charts and graphs in Laravel, you may refer to the Chart.js documentation for more details on customizing your charts.


Recommended Posts

View All

Laravel 8 How To Merge Two PDF Files Example


laravel 8 how To merge two PDF files example,how to merge two PDF files in laravel 8,merge two PDF files,pdf,pdf in laravel 8

Laravel 9 FullCalendar Ajax Tutorial with Example


We&amp;#039;ll show you how to use the Fullcalendar JavaScript event calendar plugin to add FullCalendar to your Laravel app and create and cancel eve...

How to Generate a Variety of QR Codes in a Laravel 9 App


In the Laravel application, a basic QR code generator allows you to generate several sorts of QR Codes.

Laravel 8 Clear Cache of Route, View, Config Command Example


laravel 8 clear cache, laravel 8 clear cache config, laravel 8 cache clear view, laravel 8 cache clear config, laravel 8 cache clear command

Generate Laravel PDF with Image Example


In this post, I will demonstrate how to create a Laravel PDF with an image. We occasionally need to generate a PDF with an image for reporting purpose...