Laravel 9 chart using charts js example; In this tutorial, we will learn how to implement a pie chart using a charts js in laravel 9 app.
ChartJS is simple, clean and engaging HTML5 based JavaScript chart. Chart.js is an easy way to include animated, interactive graphs on your website for free.
Laravel 9 Charts JS Chart Example Tutorial
Follow the following steps to implement chart using charts js in laravel 9 apps:
- Step 1: Create a route
- Step 2: Create Controller
- Step 3: Create Blade View File and Integrate Chart js Library
- Step 4: Start Development Server
Step 1: Create a route
In the first step, you need to create routes for the chart js. So go to routes/web.php and update the below route in your file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ChartJSController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('chart-js', [ChartJSController::class, 'index']);
Step 2: Create Controller
Next step, you need to create a new controller name ChartController.php. And update the below code into your controller:
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Redirect,Response;
Use DB;
use Carbon\Carbon;
class ChartJSController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$record = User::select(\DB::raw("COUNT(*) as count"), \DB::raw("DAYNAME(created_at) as day_name"), \DB::raw("DAY(created_at) as day"))
->where('created_at', '>', Carbon::today()->subDay(6))
->groupBy('day_name','day')
->orderBy('day')
->get();
$data = [];
foreach($record as $row) {
$data['label'][] = $row->day_name;
$data['data'][] = (int) $row->count;
}
$data['chart_data'] = json_encode($data);
return view('chart-js', $data);
}
}
Step 3: Create Blade View File and Integrate Chart js Library
Final steps, in this step you need to create a blade view file. So go to the resources/views/chart-js.blade.php and update the below javascript and HTML code for displaying the pie chart using the chart js libraries:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 9 Chart JS Example Tutorial - Pie Chart - Tutsmake.com</title>
<!-- Latest CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="chart-container">
<div class="pie-chart-container">
<canvas id="pie-chart"></canvas>
</div>
</div>
<!-- javascript -->
<script>
$(function(){
//get the pie chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var ctx = $("#pie-chart");
//pie chart data
var data = {
labels: cData.label,
datasets: [
{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
"#1D7A46",
"#CDA776",
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46",
"#F4A460",
"#CDA776",
],
borderWidth: [1, 1, 1, 1, 1,1,1]
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Last Week Registered Users - Day Wise Count",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Pie Chart class object
var chart1 = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});
</script>
</body>
</html>
Note: Don’t forget to include the chart js libraries, jquery, and bootstrap CDN libraries on your blade view file and you can add or remove this library according to your requirement.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Or also don’t forget to add this javascript code. The chart js library also provides so many options for the chart js. You can change or modify according to your requirements.
<script>
$(function(){
//get the pie chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var ctx = $("#pie-chart");
//pie chart data
var data = {
labels: cData.label,
datasets: [
{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57",
"#1D7A46",
"#CDA776",
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46",
"#F4A460",
"#CDA776",
],
borderWidth: [1, 1, 1, 1, 1,1,1]
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Last Week Registered Users - Day Wise Count",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Pie Chart class object
var chart1 = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});
</script>
Step 4: Start Development Server
Open a terminal and execute the following command to start the development server:
php artisan serve
Then open the browser and fire the below-given URL on it:
http://127.0.0.1:8000/chart-js
