If you want to dynamic create a pie chart using charts js in your Laravel 10 web application. So this task is very easy. For this, you have to include the charts js library in your Laravel 10 web app and use the pie chart function of charts js. With this, you can build the pie in your Laravel 10 web app.
Create dynamic pie chart in laravel; In this tutorial, you will learn how to create a pie chart using a charts js in Laravel 10 app.
Laravel 10 Charts JS Example | Pie Chart
By using the following steps, you can create dynamic pie charts in laravel 10 apps using charts js.
- 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']);
Recommended Post
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);
}
}
Recommended Post
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 10 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 terminal and execute the following command to start development server:
php artisan serve
Then open browser and fire the below given url on it:
http://127.0.0.1:8000/chart-js
