Laravel 9 Group Column Chart Using Highcharts

Websolutionstuff | Jan-02-2023 | Categories : Laravel PHP jQuery

In the world of web development, Laravel 9 is a user-friendly PHP framework. When combined with Highcharts, a top JavaScript charting library, they become a powerful team for creating engaging data visuals.

At the center of this partnership is the "Group Column Chart." This type of chart makes it easier to compare data by grouping points and using columns to show categories. It helps us understand complex data and find hidden patterns.

Laravel 9 manages data, and Highcharts turns it into attractive visuals. Together, they bring information to life, turning numbers into a compelling story that informs and enlightens.

Exploring Laravel 9 Group Column Charts using Highcharts will help us understand both the technical and artistic sides of making meaningful and impactful data visuals. So, let’s dive deeper:

Step 1: Install Laravel 9

Step 2: Create HighChartsController

Step 3: Add Route

Step 4: Create Blade File for Display Group Column Chart

Step 5: Add Script of Group Column Chart

 

Step 1: Install Laravel 9

 In this step, we will install the laravel 9 application using the following command.

composer create-project laravel/laravel laravel-9-group-column-hightcharts

 

 

Step 2: Create HighChartsController

Now, we will create HighchartsController and add the highChart() function. So, add the below code to that file.

app/Http/Controllers/HighchartsController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HighchartsController extends Controller
{
    public function groupHighChart()
    {

        return view('index', compact('group-column-chart'));

    }
}

 

Step 3: Add Route

 In this step, we will add routes in the web.php file. So, add the following code to that file.

routes/web.php

use App\Http\Controllers\HighchartsController;

Route::get('highchart/group-column-chart', [HighchartsController::class, 'groupHighChart']);

 

Step 4: Create Blade File for Display Group Column Chart

In this step, we will create a group-column-chart.blade.php file. Also, we will add CSS and jQuery and add the following code to that file.

resources/views/group-column-chart.blade.php

<html>
    <head>
        <style>
            #container {
                height: 400px;
            }

            .highcharts-figure,
            .highcharts-data-table table {
                min-width: 310px;
                max-width: 800px;
                margin: 1em auto;
            }

            .highcharts-data-table table {
                font-family: Verdana, sans-serif;
                border-collapse: collapse;
                border: 1px solid #ebebeb;
                margin: 10px auto;
                text-align: center;
                width: 100%;
                max-width: 500px;
            }

            .highcharts-data-table caption {
                padding: 1em 0;
                font-size: 1.2em;
                color: #555;
            }

            .highcharts-data-table th {
                font-weight: 600;
                padding: 0.5em;
            }

            .highcharts-data-table td,
            .highcharts-data-table th,
            .highcharts-data-table caption {
                padding: 0.5em;
            }

            .highcharts-data-table thead tr,
            .highcharts-data-table tr:nth-child(even) {
                background: #f8f8f8;
            }

            .highcharts-data-table tr:hover {
                background: #f1f7ff;
            }
        </style>
    </head>
    <title>Laravel 9 Group Column Chart Using Highcharts - Websolutionstuff</title>
    <body>
        <div id="container"></div>
    </body>    
</html>

 

 

Step 5: Add Script of Group Column Chart

Now, we will use the Highcharts() function to display group columns or group bar charts. So, add the script in the <head> tag or at the bottom of the HTML tag.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    $(document).ready(function(){
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },

            title: {
                text: 'Laravel 9 Group Column Chart Using Highcharts - Websolutionstuff'
            },

            xAxis: {
                categories: ['Gold', 'Silver', 'Bronze']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                text: 'Count medals'
                }
            },

            tooltip: {
                formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y;
                }
            },

            series: [{
                name: 'Norway',
                data: [148, 133, 124],
                stack: 'Europe'
            }, {
                name: 'Germany',
                data: [102, 98, 65],
                stack: 'Europe'
            }, {
                name: 'United States',
                data: [113, 122, 95],
                stack: 'North America'
            }, {
                name: 'Canada',
                data: [77, 72, 80],
                stack: 'North America'
            }]
        });
    });
</script>

Output:

how to create group column chart in laravel 9 using highcharts

Conclusion

Creating Group Column Charts with Highcharts will not only make data engaging but also offer valuable insights at a glance.

You just need to follow the steps mentioned, and you will be on your way to transforming your data into stunning visualizations. So, take the first step today and make your information shine brightly in presentations and seminars!


You might also like:

Recommended Post
Featured Post
How To Image Upload With Preview In Angular 15
How To Image Upload With Previ...

In today's world of web development, being able to upload images with a preview feature is a common requirement for...

Read More

Jun-16-2023

Laravel 9 Cron Job Task Scheduling Tutorial
Laravel 9 Cron Job Task Schedu...

In this article, we will see laravel 9 cron job task scheduling tutorial, many times we require to run some piece o...

Read More

Mar-17-2022

How to Integrate Cashfree Payment Gateway in Laravel 10
How to Integrate Cashfree Paym...

Hello developers! Today, we're about to embark on a journey to elevate our Laravel applications by integrating...

Read More

Feb-12-2024

How To Remove index.php From URL In Laravel 9
How To Remove index.php From U...

If you're a developer, you're likely to have frustration with "index.php" cluttering up your website&#...

Read More

Jan-13-2023