Hello Devs, 

In this tutorial, we will learn Laravel 8 Highchart Donut Chart Example.

Highcharts is a js library, that populates bar chart, line chart, area chart, column chart, etc. Highcharts also provides several themes and graphic designs that way you can make a better layout. Highcharts is a very popular and simple library for a PHP developers.

Follow the step-by-step guides below. 

Step 1: Install Laravel Project:

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

Step 2: Setup Database

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name 
DB_USERNAME=here database username
DB_PASSWORD=here database password

Step 3 : Create Migration and Model

php artisan make:migration create_students_table

database/migrations/2021_01_06_101902_create_students_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('course');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

run migration be bellow command:

php artisan migrate

run bellow command one by one:

php artisan make:model Student


app/Models/Student.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    use HasFactory;
    protected $fillable = [
        'name','course'
    ];
}


Step 4 : Add Route:

routes/web.php

use App\Http\Controllers\HighChartController;

Route::get('donut-chart',[HighChartController::class,'donutChart']);


Step 5 : Create Controller

app\Http\Controllers\HighChartController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Student;

class HighChartController extends Controller
{
    public function donutChart()
    {
        $students = Student::select('course', \DB::raw("COUNT('id') as count"))
                ->groupBy('course')
                ->get();

        return view('donutChart', compact('students'));
    }
}


Step 6 : Create View file

resources/views/donutChart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Make Donut HighChart in Laravel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <style type="text/css">
        .box{
            width:800px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 50px;">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Laravel Donut HighChart Tutorial Example - rathorji.in</h3>
                    </div>
                    <div class="panel-body" align="center">
                        <div id="pie_chart" style="width:750px; height:450px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var students =  <?php echo json_encode($students); ?>;
            var options = {
                chart: {
                    renderTo: 'pie_chart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Percentage of Students Courses'
                },
                 tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                            dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    }
                },
                series: [{
                    type:'pie',
                    name:'Student'
                }]
            }
            myarray = [];
            $.each(students, function(index, val) {
                myarray[index] = [val.course, val.count];
            });
            options.series[0].data = myarray;
            chart = new Highcharts.Chart(options);
            
        });
    </script>
</body>
</html>


Create Dummy Records

 Run Your Project

php artisan serve

open bellow URL on your browser:

http://localhost:8000/donut-chart


May this example help you.