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







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×