Laravel 8 Highcharts Example

Hello friends, Today we will show Laravel 8 Highcharts Example. In this example you will learn how to implement a highcharts in laravel 8. We will show how to add highchart in laravel 8 application. In this post we discuss on about of line chart using highcharts in laravel 8.

Highcharts is a js library, this library through we can create bar chart, line chart, column chart, area chart etc. Highcharts is a open source chart library. Highcharts also provide sevral theme and graph that way you can use more chart from here : HighCharts Official Site

Read also : CRUD with Image Upload in Laravel 8 Example

This example provide step by step Laravel 8 Highcharts Tutorial for Beginner. Also we will provide example for how to use highchart in laravel 8.

Laravel 8 Highcharts Example Tutorial

Now let’s see follow example for how to use highchart in laravel 8. So let’s follow bellow step by step:

Step 1 : Add Routes

In this step we need to add following route in our application for create dynamic highchart in laravel 8.

use App\Http\Controllers\UserController;

Route::get('highchart', [UserController::class, 'highChart']);

Step 2 : Create Controller for Laravel 8 Highchart

App\Http\Controllers\UserController .php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;

class UserController extends Controller
{
    public function highChart()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');                
        return view('index', compact('users'));
    }
}

Step 3 : Create Blade File

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Highcharts Example - web-tuts.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="border:1px solid red; margin:20px;">
<h1 class="text-center">Laravel 8 Highcharts Example - web-tuts.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 Records - 2021'
        },
        subtitle: {
            text: 'Source: websolutionstuff.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Number of Users'
            }
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom'
        },
        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>

I hope you understand of laravel 8 highchart tutorial example and it can help you…

Laravel 8 Highcharts Example Tutorial

Step 1 : Add Routes

Step 2 : Create Controller for Laravel 8 Highchart

Step 3 : Create Blade File

Related posts: