Laravel 7 Highcharts Tutorial Example

29201 views 1 year ago Laravel

In this tutorial, i am going to show you how to utilize Highcharts in laravel with a felicitous example. whenever you require to integrate charts in laravel 6 server-side. then you can facilely use following example you have to fetch data from database and then set in Highcharts function,

If you don't ken how to make laravel highcharts or how to utilize laravel highcharts, don't worry. You are the right place. I will avail you to learn step by step how to utilize laravel highcharts.

Today, i will avail you to learn how to integrate chart utilizing Highcharts in laravel 7 i will explicate step by step laravel 7 highcharts example. you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts, etc. we will engender line highchart with laravel 7.

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

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

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>Highcharts Example - LaravelCode</title>
</head>
<body>
<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: codechief.org'
        },
         xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        },
        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:

For creating dummy records, run this below commad

php artisan tinker
//then
factory(App\User:class,50)->create()
//then
exit

i hope you like this article.

Author : Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]