In this post, we learn How to use Charts In Laravel 5.7 Using Charts Package. we use consoletvs/charts package for the graph, pie chart in Laravel 5.7.
Today topic is how to use Charts In Laravel 5.7. In this application, we use Consoletvs/charts package. this package provides many types of graph. this package base on the morris.js javascript library. using this package we can create a line chart, geo chart, bar chart, pie chart, donut chart, line chart and area chart example in Laravel application. a big data or record always the best solution to represent into charts.
Step: 1 Create a new Laraval 5.7 application
Create a new Laravel 5.7 application using the following command.
laravel new chartsAfter successfully creating a new project, now need to first install consoletvs/charts chart package for integrate chart in Laravel 5.7 application using the following command.
Step: 2 Install consoletvs/charts package in Laravel 5.7
composer require "consoletvs/charts:5.*"Note: You are using the latest version of the Laravel, I highly recommend to use the latest version of consoletvs/charts.
Step: 3 Configure Package
After install the successfully consoletvs/charts package we are should configure this package service provider and alias in the config/app.php file.
app.php
'providers' => [
....
ConsoleTVs\Charts\ChartsServiceProvider::class,
],
'aliases' => [
....
'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
],After adding the above code we need them to the public vender.
php artisan vendor:publishAfter entering this command we need to choose providers. In my case, I choose 2 because charts providers indexed in 2. Enter 2 and enter.
Step:4 Now add some dummy data to represent in the chart (if you have data in the database already skip this step)
Here we use fresh Laravel application so we need to add some data in the database so enter the following command to create a new migration table.
php artisan make:authAfter running this command we have migration file now, time to migrate table using this following command.
php aritsan migrateAfter that, we need to add some dummy data so we are adding some records in user table using tinker. simply run following command.
php artisan tinker
>>> factory(App\User::class, 20)->create();Step: 5 Create route
Route::get('chart', 'ChartController@index')Step: 6 Create a new Controller
Create a new controller using this following command.
php artisan make:controller ChartContollerAnd add the following command.
ChartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;
class ChartController extends Controller
{
//
public function index()
{
$users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))
->get();
$chart = Charts::database($users, 'bar', 'highcharts')
->title("Monthly new Register Users")
->elementLabel("Total Users")
->dimensions(1000, 500)
->responsive(false)
->groupByMonth(date('Y'), true);
return view('chart',compact('chart'));
}
}
Step: 7 create a new view to show a chart
create a chart.blade.php a view page and add some code.
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >Chart Demo</div>
<div >
{!! $chart->html() !!}
</div>
</div>
</div>
</div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}
@endsectionAfter that time to show our result in the browser. visit //localhost:8000/chart
So, here is our result.
If we want another chart we can easily add to the Laravel application.
Another chart example and some configure code
Pie Chart
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;
class ChartController extends Controller
{
//
public function index()
{
$users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))
->get();
$chart = Charts::database($users, 'bar', 'highcharts')
->title("Monthly new Register Users")
->elementLabel("Total Users")
->dimensions(1000, 500)
->responsive(false)
->groupByMonth(date('Y'), true);
$pie = Charts::create('pie', 'highcharts')
->title('My nice chart')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
return view('chart',compact('chart','pie'));
}
}
In chart.blade.php
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >Chart Demo</div>
<div >
{!! $chart->html() !!}
</div>
<hr>
{!!$pie->html() !!}
</div>
</div>
</div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}
{!! $pie->script() !!}
@endsectionResult
2. Donut / Doughnut Chart
Charts::create('donut', 'highcharts')
->title('My nice chart')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);3. Line Chart
Charts::create('line', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);4. Area Chart
Charts::create('area', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);5. Areaspline Chart
Charts::multi('areaspline', 'highcharts')
->title('My nice chart')
->colors(['#ff0000', '#ffffff'])
->labels(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday', 'Sunday'])
->dataset('John', [3, 4, 3, 5, 4, 10, 12])
->dataset('Jane', [1, 3, 4, 3, 3, 5, 4]);6. Geo Chart
Charts::create('geo', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['ES', 'FR', 'RU'])
->colors(['#C5CAE9', '#283593'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);7. Percentage Chart
Charts::create('percentage', 'justgage')
->title('My nice chart')
->elementLabel('My nice label')
->values([65,0,100])
->responsive(false)
->height(300)
->width(0);So, here we completed this post How to use Charts In Laravel 5.7 Using Charts Package.
Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.
