In this tutorial you will learn about the Laravel 7/6 Pie Chart using Charts JS Example Tutorial and its application with practical example.
In this Laravel 7/6 Pie Chart using Charts JS Example Tutorial I will show you how to implement pie chart using a chart js in laravel. In this tutorial you will learn to implement pie chart using a chart js in laravel applications. In this example we will be using charts.js to implement pie chart in laravel application.
Laravel 7/6 Pie Chart using Charts JS Example Tutorial
1. Create a route
First we will define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 |
Route::get('chart-js', 'ChartController@index'); |
2. Create Controller
Now, lets create a controller named ChartController using command given below –
|
1 |
php artisan make:controller ChartController |
Once the above command executed, it will create a controller file ChartController.php in app/Http/Controllers/ directory. Open the ChartController.php file and put the following code in it.
app/Http/Controllers/ChartController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php namespace App\Http\Controllers; use App\User; use Illuminate\Http\Request; use Redirect,Response; Use DB; use Carbon\Carbon; class ChartController 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); } } |
3. Create Blade View File
Now, we will create a blade file. Go to the resources/views/chart-js.blade.php and put the following javascript and HTML code for displaying the pie chart using the chart js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html> <head> <title>Laravel Chart JS Example Tutorial - Pie Chart</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> |
Below is the list of javascript libraries need to be included before implementing charts.
|
1 2 3 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<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> |
