In this tutorial you will learn about the Laravel 8 Charts JS Example Tutorial and its application with practical example.
In this Laravel 8 Charts JS Example Tutorial I will show you how to implement Charts JS in laravel 8 application. In this tutorial you will learn to implement Charts JS in laravel 8. In this example I will demonstrate the use of Charts JS in laravel application. In this example we will create pie chart using a chart js in laravel 8 application.
ChartJS is easy to use and simple HTML5 based JavaScript charts library. With Chart js we can create animated, interactive graphs in our laravel application.
Laravel 8 Charts JS Example Tutorial
In this step by step tutorial I will demonstrate you to fetch the last 7 days data and display it on pie chart using charts js in laravel. Please follow the instruction given below:
- 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 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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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
Now, lets create a controller named ChartJSController using command given below –
|
1 |
php artisan make:controller ChartJSController |
Once the above command executed, it will create a controller file ChartJSController.php in app/Http/Controllers/ directory. Open the ChartJSController.php file and put the following code in it.
app/Http/Controllers/ChartJSController.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\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
Now, we will create a blade view file. Go to the resources/views/chart-js.blade.php and put the below javascript and HTML code for displaying the chart. So go to the resources/views/ and update the below javascript and HTML code for displaying the chart using chart js library:
|
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 8 Chart JS Example Tutorial</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> |
Remember to include highchart js libraries on your blade file:
|
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> |
Use below javascript as per requirement :
|
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> |
Step 4: Start Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://127.0.0.1:8000/chart-js |
