How to add Chart using Highcharts in Laravel 6?

How to add Chart using Highcharts in Laravel 6?

In this Laravel 6 Highcharts tutorial,you'll learn how to add chart using Highcharts in Laravel 6. I will explain step by step Laravel 6 Highcharts example. You can simply use Line Charts, Bar Charts, Pie Charts, Area Charts etc. We will create line Highchart with Laravel 6

Today, I will guide you how to add chart using Highcharts in Laravel 6. I will explain step by step Laravel 6 highcharts example. you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts etc. We will create line highchart with Laravel 6.

Highcharts is a js library, this library through we can use bar chart, line chart, area chart, column chart etc. Highcharts is a open source chart library. Highcharts also provide sevral theme and graph that way you can use more chart from here : HighCharts Site.

Whenever you need to add charts in laravel 6 server side. then you can easily use following example you have to fetch data from database and then set in Highcharts function, so let's see how to use Highcharts in larave with proper example.

Create Route:

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

routes/web.php

Route::get('chart', '[email protected]');

Create Controller:

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

app/Http/Controllers/ChartController.php

<?php



namespace App\Http\Controllers;



use Illuminate\Http\Request;

use App\User;



class ChartController extends Controller

{

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    public function index()

    {

        $users = User::select(\DB::raw("COUNT(*) as count"))

                    ->whereYear('created_at', date('Y'))

                    ->groupBy(\DB::raw("Month(created_at)"))

                    ->pluck('count');



        return view('chart', compact('users'));

    }

}

Create Blade File:

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

resources/views/chart.blade.php

<!DOCTYPE html>

<html>

<head>

    <title>Laravel 6 Highcharts Example - ItSolutionStuff.com</title>

</head>



<body>

<h1>Laravel 6 Highcharts Example - ItSolutionStuff.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 Growth, 2019'

        },

        subtitle: {

            text: 'Source: itsolutionstuff.com.com'

        },

         xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: {

            title: {

                text: 'Number of New Users'

            }

        },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle'

        },

        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>

Create Dummy Records:

Here, we need to add some dummy records on users table as monthly wise. You need to create users on each month with created date as like bellow screen shot:

Laravel 6 Highcharts Tutorial

Ok, now you can run and check chart.

I hope it can help you...

Laravel PHP WebDev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Php how to delete multiple rows through checkbox using ajax in laravel

In this article i will let you know to delete multiple rows through checkbox using ajax in laravel and before delete we will give a confirmation message.

Clear Cache in Laravel 6.8 App using Artisan Command Interface (CLI)

In Laravel 6 tutorial, we learn how to use PHP artisan command interface (CLI) to clear the cache from Laravel 6.8 application. How To Clear Cache in Laravel 6.8 Application using Artisan Command Line Interface (CLI)? How to clear route cache using php artisan command? How to easily clear cache in Laravel application? How to clear config cache in PHP Laravel via artisan command? How to clear Laravel view cache? How to Reoptimized class in Laravel via artisan CLI?

Get Weather Data with Laravel Weather

Get Weather Data with Laravel Weather. Laravel Weather is a good package which we can use to get weather data. It's a wrapper around Open Weather Map API (Current weather). A wrapper around Open Weather Map API (Current weather)

5 Laravel’s Hidden Gems

Spread the love1. Stop on first validation error By default, Laravel will check for all validation rules and return a list of errors. But if you want to stop this process after first validation failure, that’s how you can achieve…Read More→

Some of the most frequent how tos in Laravel

Spread the loveHow to get relationship from relationship using With() in Laravel Some times there are cases where you want to get relationship from relationship in Laravel, that can be achieved via following: How to create multiple where clauses in…Read More→