Scribd
Upload
67 views4 pages

Laravel 6 Highcharts Tutorial For Beginner

This document discusses how to create line charts in Laravel 6 using the Highcharts library. It provides steps to create a route and controller to fetch dummy user data from the database. It then demonstrates how to generate a line chart in a Blade template using the Highcharts JavaScript library, passing the user data to visualize registration trends over time.

Uploaded by

Saul Ortega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views4 pages

Laravel 6 Highcharts Tutorial For Beginner

This document discusses how to create line charts in Laravel 6 using the Highcharts library. It provides steps to create a route and controller to fetch dummy user data from the database. It then demonstrates how to generate a line chart in a Blade template using the Highcharts JavaScript library, passing the user data to visualize registration trends over time.

Uploaded by

Saul Ortega
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like