Laravel Vue JS Axios Post Request Example Tutorial (https://www.codechief.
org/article/laravel-vue-js-axios-post-request-example-
tutorial)
Laravel 6 Authorization using Gates (https://www.codechief.org/article/laravel-6-authorization-using-gates)
Real Time Chat App with Laravel 6 Vue Js and Pusher (https://www.codechief.org/article/real-time-chat-app-with-laravel-6-vue-js-and-
pusher)
Laravel Macros | Learn How to Extend Laravel Core Class (https://www.codechief.org/article/laravel-macros-learn-how-to-extend-
laravel-core-class)
Simple Like System in Laravel 6 using Vue Js (https://www.codechief.org/article/simple-like-system-in-laravel-6-using-vue-js)
Laravel 6 | Filter Data Using Vue Js (https://www.codechief.org/article/laravel-6-filter-data-using-vue-js)
Laravel 6 Middleware Tutorial With Example (https://www.codechief.org/article/laravel-6-middleware-tutorial-with-example)
Laravel Pipeline Interpretation with Example (https://www.codechief.org/article/laravel-pipeline-interpretation-with-example)
How to Create Middleware with Parameters in Laravel 6 (https://www.codechief.org/article/how-to-create-middleware-with-
parameters-in-laravel-6)
Laravel 6 Highcharts Tutorial for Beginner
Posted By Mahedi Hasan (https://www.codechief.org/author/mahedi-hasan) Category Framework (https://www.codechief.org/article/category/framework) Sub-
category Laravel Advance (https://www.codechief.org/article/subcategory/laravel-advance)
December 2, 2019
In this tutorial i am going to show you how to use Highcharts in larave with proper example.whenever you need to add
charts in laravel 6 server side. then you can easily use following example you have to fetch data from database and then
set in Highcharts function,
Today, i will help you to learn how to add chart using Highcharts in laravel 6. i will explain step by step laravel 6
highcharts example. you can simply use Line Charts, Bar Charts, Pie Charts, Area Charts etc. we will create line
highchart with laravel 6.
Highcharts is a js library, this library through we can use bar chart, line chart, area chart, column 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 Site (https://www.highcharts.com/).
Preview
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', 'ChartController@index');
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 - codechief.org</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', 'Nov
},
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
Then you will see 50 records are created in your users table. Now you can check it. Hope it wiil be helpful for you.
Chart (https://www.codechief.org/article/tag/chart) Laravel 6 (https://www.codechief.org/article/tag/laravel-6)
Highchart (https://www.codechief.org/article/tag/highchart) Highlight Js (https://www.codechief.org/article/tag/highlight-js)
Laravel (https://www.codechief.org/article/tag/laravel)
NEXT POST (HTTPS://WWW.CODECHIEF.ORG/ARTICLE/LARAVEL-6-NOTIFICATION-TUTORIAL-CREATE-NOTIFICATION-WITH-LARAVEL-6)
Author Latest Articles (https://www.codechief.org/author/mahedi-hasan)
Author All Articles (https://www.codechief.org/all-article/mahedi-hasan) + Follow
A web enthusiastic, self-motivated Full-Stack Web Developer from Dhaka, Bangladesh with experience in developing applications using
JavaScript, Laravel & Wordpress specifically. Facebook (https://www.facebook.com/niloy.afnan.18) Github (https://github.com/techmahedy)
Website (https://codechief.org)
Was this article helpful?
0
