Laravel 8 Highcharts Tutorial Example

Laravel

168

Admin

29-12-2020


Laravel 8 highchart tutorial. In this example, you will learn implement highchart in aravel 8 app. And This tutorial demonstrates how to create charts in Laravel 8 app with Highcharts.

Laravel 8 Highcharts Example: Using Highcharts JS in Laravel 8 App

  • Install Laravel 8 App
  • Configure Database Details
  • Add Route
  • Create Controller
  • Create View File
  • Start development server

Step 1: Install Laravel 8 App

First Step, you need to download or install laravel web application new setup on your local machine. you can use the following command to download or install laravel application new setup:

    composer create-project --prefer-dist laravel/laravel blogFirebase

If you want to install a specific version of laravel, you can follow the following tutorial.

    https://w3alert.com/laravel-tutorial/laravel-install-on-windows-ubuntu-with-composer

Step 2: Configure Database Details

After that, you will set up the database credentials in .env file. So open your .env file and update database credentials following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=root
DB_PASSWORD=root

Step 3: Add Route

Next step, Navigate to "routes/web.php" file and add the following routes into your web.php file:

routes/web.php

    
use App\Http\Controllers\HighChartController;

Route::get('highchart', [HighChartController::class, 'index']);

Step 4: Create Controller

If you haven't HomeController then we should create a new controller as HomeController in this path app/Http/Controllers/HomeController.php. Make sure you should have a visitor table with some data. this controller will manage data and chart data and view file, so put bellow content in the controller file:

<?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 5: Create View File

In last step, we have to create view file "users.blade.php" for generate view chart, so create users.blade.php file and update bellow code into it:

resources/view/users.blade.php

      <!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Highcharts Example - w3alert.com</title>
</head>
   
<body>
<h1>Laravel 8 Highcharts Example - w3alert.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: w3alert.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>

Step 6: Start development server

You can use the following command artisan command to start the development server:

php artisan serve

Finally, open browser and hit the following url in it:

http://localhost:8000/highchart