How to use Charts In Laravel 5.7 Using Charts Package

Brijpal Sharma
laravel   Publish on:-January 24th, 2019 , Category:- Web Development


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 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 becouse charts providers indexed in 2. Enter 2 and enter.

How to use Charts In Laravel 5.7 Using Charts Package

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

How to use Charts In Laravel 5.7 Using Charts Package

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

How to use Charts In Laravel 5.7 Using Charts Package

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

Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...


4 Comments

Generic placeholder image

Ceyda
Publish on:-June 18th, 2019
Hi, I am tring to make similar example. I wanted to sum of monthly price values from database with graph. It is showing graphs and months but it doesn't correct sum values. My part of Index controller values is below. Can you help me please? I will very appreciate you:) $data = Billingtransactions::select( \DB::raw('MONTH(created_at) as months'), \DB::raw("Sum(price) as sums") ) ->groupBy('months') ->orderBy('months','asc') ->get(); $chart = Charts::database($data, 'bar', 'highcharts') ->title("Monthly Amount") ->elementLabel("Total Amount") ->dimensions(300, 500) ->responsive(false) ->groupBy('months');

Generic placeholder image

eliran
Publish on:-April 27th, 2020
Hello. this tutorial very help me in 5.8 version, but now with 6.2 its doesn't working. can you give a tutorial How to use Charts In Laravel 6.2 Using Charts Package?

Generic placeholder image

Brijpal Sharma
Publish on:-April 29th, 2020
Sure, Eliran I will Make Tutorial for Laravel 6.2 or the latest version.

Generic placeholder image

eliran
Publish on:-May 01st, 2020
Thanks very help, more another question: I'm success to do type of bar charts graph according to my database (mysql), but another types like pie i can't. it's possible? if yes i will glad to a example. ($pie_chart = Charts::database( $loans, 'pie', 'material') ->title('segmentation occuputioan') ->elementLabel("Total transactions by banks") ->Width(0) ->responsive(true) ->Colors(['#4caf50']) ->groupBy('name'); I get this error -> "Unknown chart library / type combination"

You must be logged in to post a comment.