How to add charts in Laravel 10 using Highcharts

How to add charts in Laravel 10 using Highcharts

Highcharts js is a simple JavaScript library. Which is very easy to use. Using this you can create pie charts, line charts, bar charts, graph charts and etc charts in Laravel 10 application.

Hightcharts in laravel 10 apps; In this tutorial, you will learn how to create any types of chart(pie, line, bar, graph & stack) using highcharts in Laravel 10 apps.

How to add charts in Laravel 10 using Highcharts

By using the following steps, you can create pie charts, line charts, bar charts and etc charts in Laravel 10 application.

  • Step 1: Define Routes
  • Step 2: Create a Controller
  • Step 3: Create Blade File
  • Step 4: Run Development Server

Step 1: Define Routes

In the first step, you need to create routes for highchart.

So go to routes/web.php and update the below route in your file:

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\HighChartController;

/*
|--------------------------------------------------------------------------
| 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('highchart', [HighChartController::class, 'index']);

Step 2: Create a Controller

In this step, execute the following command on cmd or terminal to create a new controller name HighChartController.php:

php artisan make:controller HighChartController

Once you have created the controller file. Now you need to add the following code into HighChartController.php, which is located on app/Http/Controller directory:

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\User;
  
class HighChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function index()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
          
        return view('highchart', compact('users'));
    }
}

Step 3: Create Blade File

In this step, create a blade view file name highchart.blade.php. So go to the resources/views/ and update the below javascript and HTML code for displaying the highchart:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 Highcharts Example - Tutsmake.com</title>
</head>
   
<body>
<h1>Laravel 10 Highcharts Example - Tutsmake.com</h1>
<div id="container"></div>
</body>
  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;
   
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2019'
        },
        subtitle: {
            text: 'Source: Tutsmake.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>
</html>

Note: Don’t forget to include the highchart js libraries on your blade view file and you can add or remove this library according to your requirement.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Or also don’t forget to add this javascript code. The highchart library also provides so many options for the highchart. You can change or modify according to your requirement:

<script type="text/javascript">
   let chart =  JSON.parse(`<?php echo $chart ?>`);
   
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2019'
        },
        subtitle: {
            text: 'Source: tutsmake.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of New Users'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'New Users',
            data: chart
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>

Step 4: Run Development Server

Open the terminal and execute the following command to start the development server:

php artisan serve

Then open a browser and fire the below-given URL on it:

http://127.0.0.1:8000/highchart

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *