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:
Content Table :
Blog Table :
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
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.
