Home Ajax Add Charts Using Highcharts In Laravel 8

Add Charts Using Highcharts In Laravel 8

by Shahriar Sagor
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.

close

You may also like