Laravel 8 Highcharts Example Tutorial

Websolutionstuff | Jul-02-2021 | Categories : Laravel PHP

Hello guys,

In this tutorial we will see laravel 8 highcharts example tutorial. you will learn how to implement a highcharts in laravel 8 using highchart js.using highcharts you can create interactive charts easily for your web projects. so, now we will see basic line chart using highcharts in laravel 8.

Highcharts is a javascript library, this library through we can use many charts like line charts, bar charts, pie charts, stock charts etc. Highcharts is a open source chart library.

For more information about highcharts : HighCharts Official Site.

A chart is a graphical representation for data visualization, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart". so it's helpful in easy to understand.

So, let's start to implement Laravel 8 Highcharts Example Tutorial.

Step 1 : Add Routes

In this step add routes in web.php file 

use App\Http\Controllers\UserController;

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

 

Step 2 : Create Controller

Now in this step create  UserController in App\Http\Controllers path.

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

In step 3 create blade file for display Highcharts in frontside so create index file in below path. and copy and paste below code in your file.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Highcharts Example - websolutionstuff.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 - websolutionstuff.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>

 

after that you will get output like below scheenshot.

Laravel 8 Highcharts Example

 

Recommended Post
Featured Post
How To Install Bootstrap In React JS
How To Install Bootstrap In Re...

In this article, we will see how to install bootstrap in react js. Also, we will see how to use bootstrap in react...

Read More

Sep-08-2022

Laravel 10: New Features And Release Date
Laravel 10: New Features And R...

In our ever-changing digital landscape, staying ahead of the competition is essential. And that's precisely what we&...

Read More

Jan-11-2023

How To Create Stacked Bar Chart In Laravel 9 Using Highcharts
How To Create Stacked Bar Char...

In this article, we will see how to create a dynamic stacked bar chart in laravel 9 using highchart. Here, we will...

Read More

Dec-30-2022

How to Add Select Clear Select2 Dropdown
How to Add Select Clear Select...

Hey everyone! Have you ever wanted to make your website's dropdown menus more interactive and user-friendly? Well, I...

Read More

Feb-19-2024