search

How to add charts in Laravel using Chart JS ?

https://www.itsolutionstuff.com/post/how-to-add-charts-in-laravel-5-using-chart-js-example.html

hashtag
How to add charts in Laravel using Chart JS ?

By Hardik Savani April 22, 2016 Category : Laravel Chart JSPlayUnmuteLoaded: 1.17%FullscreenVDO.AIarrow-up-rightIf you need to see example of laravel chartjs. it's simple example of laravel chartjs ajax example. if you have question about how to create chart in laravel then I will give simple example with solution. In this article, we will implement a how to use chartjs in laravel.

you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts, etc using chartjs js. you can use this example with laravel 6, laravel 7, laravel 8 and laravel 9 version as well.

Chartjs is a js library, this library through we can use bar chart, line chart, area chart, column chart, etc. chartjs is a open-source chart library. chartjs also provide several theme and graph that way you can use more chart from here : chartjs Sitearrow-up-right.

In this example, we will create some dummy users records and then we will display a line chart with all months of current years. so let's follow the below step and add a chart in your laravel app.

Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Route

first of all we will create simple route for creating simple line chart. so let's add simple routes as like bellow:

routes/web.php

<?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', [ChartJSController::class, 'index']);

Read Also: How to add charts in Laravel using Highcharts ?arrow-up-right

Step 3: Create Controller

Here, we will create new controller as ChartJSController. so let's add bellow code on that controller file.

app/Http/Controllers/ChartJSController.php

<?php  namespace App\Http\Controllers;    use Illuminate\Http\Request;use App\Models\User;use DB;    class ChartJSController extends Controller{    /**     * Write code on Method     *     * @return response()     */    public function index()    {        $users = User::select(DB::raw("COUNT(*) as count"), DB::raw("MONTHNAME(created_at) as month_name"))                    ->whereYear('created_at', date('Y'))                    ->groupBy(DB::raw("Month(created_at)"))                    ->pluck('count', 'month_name');         $labels = $users->keys();        $data = $users->values();                      return view('chart', compact('labels', 'data'));    }}

Step 4: Create Blade File:

here, we need to create blade file and in this blade file we use highchart js and use their code.

resources/views/chart.blade.php

Step 5: Create Dummy Records:

Here, we need to add some dummy records on users table as monthly wise.

you can create dummy records using laravel tinker command as bellow:

arrow-up-rightarrow-up-rightarrow-up-rightYou need to create users on each month with created date as like bellow screen shot:

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

Now, Go to your web browser, type the given URL and view the app output:

Read Also: Laravel - GEO Chart Example using lavachartsarrow-up-right

Output:

I hope it can help you...

PreviousLaravel Google Chart Example TutorialNextLaravel - GEO Chart Example using lavacharts

Last updated