In this tutorial, I'll give you an example of how to use highchart js to construct a highchart in a laravel 9 application.

Table of Contents

  • Create web routes
  • Create Controller
  • Create Blade File
  • Run Development Server

Create web routes

Create routes for highchart as a first step. Go to routes/web.php and make the following update to the 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']);

Create Controller

To create a new controller with the name HighChartController.php in this stage, enter the following command into the terminal:

php artisan make:controller HighChartController

Then, in the HighChartController.php file, which is located in the app/Http/Controller directory, add the following code:

<?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'));
    }
}

Create Blade File

Create a blade view file with the name highchart.blade.php in this stage. So, in order to display the highchart, go to resources/views/ and alter the javascript and HTML code below:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Highcharts Example - CodeSolutionStuff.com</title>
</head>
   
<body>
<h1>Laravel 9 Highcharts Example - CodeSolutionStuff.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, 2022'
        },
        subtitle: {
            text: 'Source: CodeSolutionStuff.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>

Remember to add the highchart JS libraries to your blade view file. You can add or remove this library depending on your needs.

<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>

Alternatively, remember to include this javascript code. There are a tonne of alternatives for the highchart in the highchart library. You can alter or edit in accordance with your needs:

<script type="text/javascript">
   let chart =  JSON.parse(`<?php echo $chart ?>`);
   
    Highcharts.chart('container', {
        title: {
            text: 'New User Growth, 2022'
        },
        subtitle: {
            text: 'Source: CodeSolutionStuff.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>

Run Development Server

Start the development server by entering the following command in the terminal window:

php artisan serve

then launch a browser and enter the following URL there:

http://127.0.0.1:8000/highchart


Recommended Posts

View All

Effortlessly Handle File Uploads in Laravel with FilePond


We'll walk through the process of setting up FilePond, creating a file upload form, and handling file uploads in Laravel

Laravel where clause with date_format() example


laravel db raw where, laravel where date_format, laravel date_format mysql where, laravel date_format example, laravel where with month

Laravel One to Many Polymorphic Relationship


laravel polymorphic relations example, laravel polymorphic one to many, laravel eloquent polymorphic relations, laravel one to many polymorphic

Laravel 8 How To Merge Two PDF Files Example


laravel 8 how To merge two PDF files example,how to merge two PDF files in laravel 8,merge two PDF files,pdf,pdf in laravel 8

Laravel Eloquent Query - Laravel whereKey method


We'll look at the whereKey method in Laravel Eloquent in this post. whereKey is an extremely easy-to-use tool with a lot of potential.