How to use Charts In Laravel 5.7 Using Charts Package?

by

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 charts

After 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:publish

After 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:auth

After running this command we have migration file now, time to migrate table using this following command.

php aritsan migrate

After 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', '[email protected]')

Step: 6 Create a new Controller 

Create a new controller using this following command.

php artisan make:controller ChartContoller

And 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() !!}
@endsection

After 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() !!}

@endsection

Result

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.

Leave a Comment