Laravel 8 Highchart Donut Chart Example

Hi Guys,

In this blog, I will show you how to draw donut chart in laravel. We will generate the simplest donut chart with Highcharts in laravel. i am going to learn you how to create donut chart highchart example with laravel. We will talk about laravel highcharts donut chart example.

Highcharts is a one type js library, that provide to populate bar chart, line chart, area chart, column chart etc. Highcharts library also provide several theme and graphic design that way you can make better layout. Highcharts is a very popular and simple library for php developer.

In this post, we are learn how to implement simple dynamic donut highcharts laravel example. I will give you full example of donut highcharts.

In this three step, we will create one tables with some dummy data and represent in donut chart. After complete this example you will find layout of donut Highcharts is looks like as above image, it's pretty nice, i think:

Here i will give you full example for highcharts donut chart in laravel. So let's see the bellow example:

Step 1: Install Laravel Project

First, you need to download the laravel fresh setup. Use this command then download laravel project setup :

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

Step 2: Setup Database

After successfully install laravel 8 Application, Go to your project .env file and set up database credential and move next step :

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

In first step we have to create migration for students tables using Laravel php artisan command, so first fire bellow command:

php artisan make:migration create_students_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create tables.

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

Now we require to run migration be bellow command:

php artisan migrate

Now you can create student model for using laravel php artisan command So let's run bellow command one by one:

php artisan make:model Student

Now open model file and put the bellow code:

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

first of all we will create simple route for creating simple donut chart. so let's add simple routes as like bellow:

routes/web.php

use App\Http\Controllers\HighChartController;

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

Step 5 : Create Controller

Here, we will create new controller as HighChartController. so let's add bellow code on that controller file.

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

Here, we need to create blade file and in this blade file we use highchart js and use their code.

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 - NiceSnippets.com</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>

Step 6 : Create Dummy Records:

Here, we need to add some dummy records on students table as course wise. You need to create students data as like bellow screen shot

Step : 7 Run Your Project

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/donut-chart

It will help you.....