Laravel 8 Highcharts Example Tutorial - Yudhy Network

Share on:

Yudhy Network - Laravel 8 highchart example. In this tutorial, you will l learn how to intergrate line highchart in l laravel 8 app

Laravel 8 Highchart example tutorial. In this tutorial, you will learn how to implement a highchart in laravel 8 app using highchart js.

When you work with any web application or e-commerce application or any dating application etc, And need to show analytics on these application dashboards.

This tutorial helps you, how to fetch month wise data and how to display month wise data in highcharts for analytics on laravel application.

Laravel 8 Highcharts Example Tutorial

Just follow the below steps and easily implement highcharts in laravel application.

Step 1: Create web routes

The first step, 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']);

Recommended Post

Laravel Get Record Last Week, Month, 7 or 15 Days, Year

Step 2: Create Controller

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

php artisan make:controller HighChartController

After that, 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'));
    }
}

Recommended Post

Laravel Get Current Date, Week, Month Wise, YEAR Data

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 8 Highcharts Example - Tutsmake.com</title>
</head>
   
<body>
<h1>Laravel 8 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 terminal and execute the following command to start development server:

php artisan serve

Then open browser and fire the below given url on it:

http://127.0.0.1:8000/highchart

Recommended Laravel Posts

Recommended:- Laravel 8 Google Chart Tutorial Example
Recommended:- Laravel 8 Generate Fake Data
Recommended:- Laravel 8 Rest API with Passport Tutorial
Recommended:- Laravel 8 Dynamic Dependent Dropdown using Ajax
Recommended:- Laravel 8 Import Export Excel & CSV File
Recommended:- Laravel Eloquent whereRaw Query Example
Recommended:- How to Get Random Records in Laravel
Recommended:- Laravel InsertOrIgnore Example
Recommended:- Laravel whereIn, whereNotIn With SubQuery Example
Recommended:- Laravel Where Null and Where Not Null Query
Recommended:- Laravel Group by Example
Recommended:- Laravel Order by Example

Please ask in the comments!

Suport : Cotekno.Com

comments powered by Disqus