Hello friends, Today we will show Laravel 8 Highcharts Example. In this example you will learn how to implement a highcharts in laravel 8. We will show how to add highchart in laravel 8 application. In this post we discuss on about of line chart using highcharts in laravel 8.
Highcharts is a js library, this library through we can create bar chart, line chart, column chart, area 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 Official Site
Read also : CRUD with Image Upload in Laravel 8 Example
This example provide step by step Laravel 8 Highcharts Tutorial for Beginner. Also we will provide example for how to use highchart in laravel 8.
Laravel 8 Highcharts Example Tutorial
Now let’s see follow example for how to use highchart in laravel 8. So let’s follow bellow step by step:
Step 1 : Add Routes
In this step we need to add following route in our application for create dynamic highchart in laravel 8.
use App\Http\Controllers\UserController; Route::get('highchart', [UserController::class, 'highChart']);
Step 2 : Create Controller for Laravel 8 Highchart
App\Http\Controllers\UserController .php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; class UserController extends Controller { public function highChart() { $users = User::select(\DB::raw("COUNT(*) as count")) ->whereYear('created_at', date('Y')) ->groupBy(\DB::raw("Month(created_at)")) ->pluck('count'); return view('index', compact('users')); } }
Step 3 : Create Blade File
resources/views/index.blade.php
<!DOCTYPE html> <html> <head> <title>Laravel 8 Highcharts Example - web-tuts.com</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body style="border:1px solid red; margin:20px;"> <h1 class="text-center">Laravel 8 Highcharts Example - web-tuts.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 Records - 2021' }, subtitle: { text: 'Source: websolutionstuff.com' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Number of Users' } }, legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' }, 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>
I hope you understand of laravel 8 highchart tutorial example and it can help you…