Add Charts Using Highcharts In Laravel 8

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Add Charts Using Highcharts In Laravel 8

Hello Dev’s
Today now in this example,I will give you a short example of how to add charts by using highcharts in laravel 8 application. So we can use highcharts library for add bar chart in our laravel 8 application.Here we se Add Charts Using Highcharts In Laravel 8 application.

Here we will know that how we use chart by using highcharts laravel 8 application.

Highcharts library is most used to any kind of chart such as add bar chart, line chart, area chart, column chart etc. This is very useful when we want to add a chart in our application as per requirement easily and also with less code.

Just need to follow below step to use bar chart in your application:

Install Laravel 8

Now we need to create laravel 8 fresh application.

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

Create Table

Here we will create two table click and view like as below :

user table:

Add Charts Using Highcharts In Laravel

Content Table :

Add Charts Using Highcharts In Laravel

Blog Table :

Add Charts Using Highcharts In Laravel

Create Route:

Add highchart route in web.php file :

routes/web.php

Route::get('/highchart', 'HighchartController@highchart')->name('highchart');

Create Controller

Type below command to create HighchartController :

php artisan make:controller HighchartController

Update controller file like as below :

app/Http/Controllers/HighchartController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Model\User;
use App\Model\Content;
use App\Model\Blog;

class HighchartController extends Controller
{
    public function highchart()
    {
         $user = DB::table('users') 
                ->select(DB::raw('count(*) as u_total'))
                ->groupBy(DB::raw("year(created_at)"))
                ->pluck('count');
      
        

        $content = DB::table('contents') 
                ->select(DB::raw('count(*) as u_total'))
                 ->where('status','A')
                 ->where('deleted_at',NULL)
                ->groupBy(DB::raw("year(created_at)"))
                ->pluck('count');
       
      

  
         $blog = DB::table('blogs') 
                ->select(DB::raw('count(*) as u_total'))
                 ->where('status','A')
                 ->where('deleted_at',NULL)
                ->groupBy(DB::raw("year(created_at)"))
                ->pluck('count');

      return view('highchart',compact('user','content','blog'));
    }
}

Create Blade File

Put below code in highchart blade file :

resources/views/highchart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>High Chart Example</title>
</head>
<body>
    <div id="highchart"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
        $(function () { 
            var dataUser = {{ json_encode($user,JSON_NUMERIC_CHECK) }};
            var dataContent = {{ json_encode($content,JSON_NUMERIC_CHECK) }};
            var dataBlog = {{ json_encode($blog,JSON_NUMERIC_CHECK) }};
            $('#highchart').highcharts({
                chart: {
                    type: 'area'
                },
                
                xAxis: {
                    Highcharts.chart('highchart', {
				chart: {
					type: 'area'
				},
				title: {
					//text: 'Monthly Average Rainfall'
					 style : {
					  display : 'none'
					}
				},
				credits:false,
				xAxis: {
					categories: category,
					crosshair: true
				},
				yAxis: {
					min: 0,
					title: {
						text: ''
					}
				},
				tooltip: {
					headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
					pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
					footerFormat: '</table>',
					shared: true,
					useHTML: true
				},
				plotOptions: {
					column: {
						pointPadding: 0.2,
						borderWidth: 0
					}
				},
                buttons: {
						contextButton: {
							menuItems: ['downloadXLS','downloadCSV','downloadPDF','downloadPNG', 'downloadSVG', 'separator', 'label']
						}
					},
				series: [{
					name: 'Teachers',
					data: users

				}, {
					name: 'Content',
					data: content

				}, {
					name: 'Blog',
					data: blog

				}]
			});
        });
    </script>
</body>
</html>

Layout

Add Charts Using Highcharts In Laravel 8

Read Also : How to Disabled Specific dates and Friday,Saturday In Bootstrap Datepicker ?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →