Need help with laravel-charts?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

LaravelDaily
170 Stars 47 Forks MIT License 94 Commits 5 Opened issues

Description

Package to draw charts in Laravel with Chart.js

Services available

!
?

Need anything else?

Contributors list

# 131,449
PHP
HTML
Shell
Laravel
50 commits
# 585,252
laravel...
laravel...
Laravel
PHP
5 commits
# 111,611
project...
Yii Fra...
yii2
Docker
3 commits
# 181,575
JavaScr...
HTML
Shell
1 commit
# 346,314
JavaScr...
HTML
1 commit

Laravel Charts

Package to generate Chart.js charts directly from Laravel/Blade, without interacting with JavaScript.


Simple Usage

Laravel Charts - Users by Months

If you want to generate a chart above, grouping users records by the month of created_at value, here's the code.

Controller:

use LaravelDaily\LaravelCharts\Classes\LaravelChart;

// ...

$chart_options = [ 'chart_title' => 'Users by months', 'report_type' => 'group_by_date', 'model' => 'App\Models\User', 'group_by_field' => 'created_at', 'group_by_period' => 'month', 'chart_type' => 'bar', ]; $chart1 = new LaravelChart($chart_options);

return view('home', compact('chart1'));

View File

@extends('layouts.app')

@section('content')

Dashboard
            <div class="card-body">

                <h1>{{ $chart1-&gt;options['chart_title'] }}</h1>
                {!! $chart1-&gt;renderHtml() !!}

            </div>

        </div>
    </div>
</div>
@endsection

@section('javascript') {!! $chart1->renderChartJsLibrary() !!} {!! $chart1->renderJs() !!} @endsection


Installation

composer require laraveldaily/laravel-charts

No additional configuration or other parameters yet.


Usage

You need to create

LaravelChart
object in your Controller, passing array of options.
$chart = new LaravelChart($options);

Then pass it to the View, as a variable:

return view('dashboard', compact('chart'));

Available Reports and Options

Currently package support three types of charts/reports:

  • group_by_date
    - amount of records from the same table, grouped by time period - day/week/month/year;
  • group_by_string
    - amount of records from the same table, grouped by any string field, like
    name
    ;
  • group_by_relationship
    - amount of records from the same table, grouped by
    belongsTo
    relationship's field

NOTE: From Laravel 8, all its models are placed in a folder called Models (App\Models)

Example with all options

$chart_options = [
    'chart_title' => 'Transactions by dates',
    'chart_type' => 'line',
    'report_type' => 'group_by_date',
    'model' => 'App\Models\Transaction',
    'conditions'            => [
        ['name' => 'Food', 'condition' => 'category_id = 1', 'color' => 'black'],
        ['name' => 'Transport', 'condition' => 'category_id = 2', 'color' => 'blue'],
    ],

'group_by_field' =&gt; 'transaction_date',
'group_by_period' =&gt; 'day',

'aggregate_function' =&gt; 'sum',
'aggregate_field' =&gt; 'amount',
'aggregate_transform' =&gt; function($value) {
    return round($value / 100, 2);
}

'filter_field' =&gt; 'transaction_date',
'filter_days' =&gt; 30, // show only transactions for last 30 days
'filter_period' =&gt; 'week', // show only transactions for this week
'continuous_time' =&gt; true, // show continuous timeline including dates without data

];

  • chart_title
    (required) - just a text title that will be shown as legend;
  • chart_type
    (required) - possible values: "line", "bar", "pie";
  • report_type
    (required) - see above, can be
    group_by_date
    ,
    group_by_string
    or
    group_by_relationship
    ;
  • model
    (required) - name of Eloquent model, where to take the data from;
  • conditions
    (optional, only for
    line
    chart type) - array of conditions (name + raw condition + color) for multiple datasets;
  • group_by_field
    (required) - name of database field that will be used in
    group_by
    clause;
  • group_by_period
    (optional, only for
    group_by_date
    report type) - possible values are "day", "week", "month", "year";
  • relationship_name
    (optional, only for
    group_by_relationship
    report type) - the name of model's method that contains
    belongsTo
    relationship.
  • aggregate_function
    (optional) - you can view not only amount of records, but also their
    SUM()
    or
    AVG()
    . Possible values: "count" (default), "avg", "sum".
  • aggregate_field
    (optional) - see
    aggregate_function
    above, the name of the field to use in
    SUM()
    or
    AVG()
    functions. Irrelevant for
    COUNT()
    .
  • aggregate_transform
    (optional) - callback function for additional transformation of aggregate number
  • filter_field
    (optional) - show only data filtered by that datetime field (see below)
  • filter_days
    (optional) - see
    filter_field
    above - show only last
    filter_days
    days of that field. Example, last 30 days by
    created_at
    field.
  • filter_period
    (optional) - another way to filter by field, show only record from last week / month / year. Possible values are "week", "month", "year".
  • continuous_time
    (optional) - show all dates on chart, including dates without data.
  • range_date_start
    (optional) - show data in from a date range by
    filter_field
    , this is the start date.
  • range_date_end
    (optional) - show data in from a date range by
    filter_field
    , this is the end date.
  • field_distinct
    (optional) - field name required, it will apply a distinct(fieldname)
  • style_class
    (optional) - add class css in canvas
  • date_format
    (optional) - add the date format, by default: American format Y-m-d
  • where_raw
    (optional) - Condition in multiple consultation situations
  • chart_height
    (optional) - add the height in options, default 300px
  • date_format_filter_days
    (optional) -add the date format for Filter days
  • withoutGlobalScopes
    (optional) -removes global scope restriction from queried model
  • with_trashed
    (optional) -includes soft deleted models
  • only_trashed
    (optional) -only displays soft deleted models

Example with relationship

$chart_options = [
    'chart_title' => 'Transactions by user',
    'chart_type' => 'line',
    'report_type' => 'group_by_relationship',
    'model' => 'App\Models\Transaction',

'relationship_name' =&gt; 'user', // represents function user() on Transaction model
'group_by_field' =&gt; 'name', // users.name

'aggregate_function' =&gt; 'sum',
'aggregate_field' =&gt; 'amount',

'filter_field' =&gt; 'transaction_date',
'filter_days' =&gt; 30, // show only transactions for last 30 days
'filter_period' =&gt; 'week', // show only transactions for this week

];


Rendering Charts in Blade

After you passed

$chart
variable, into Blade, you can render it, by doing three actions:

Action 1. Render HTML.

Wherever in your Blade, call this:

{!! $chart1->renderHtml() !!}

It will generate something like this:


Action 2. Render JavaScript Library

Package is using Chart.js library, so we need to initialize it somewhere in scripts section:

{!! $chart1->renderChartJsLibrary() !!}

It will generate something like this:


Action 3. Render JavaScript of Specific Chart

After Chart.js is loaded, launch this:

{!! $chart1->renderJs() !!}

Using Multiple Charts

You can show multiple charts on the same page, initialize them separately.

Controller:

public function index()
{
    $chart_options = [
        'chart_title' => 'Users by months',
        'report_type' => 'group_by_date',
        'model' => 'App\Models\User',
        'group_by_field' => 'created_at',
        'group_by_period' => 'month',
        'chart_type' => 'bar',
        'filter_field' => 'created_at',
        'filter_days' => 30, // show only last 30 days
    ];

$chart1 = new LaravelChart($chart_options);


$chart_options = [
    'chart_title' =&gt; 'Users by names',
    'report_type' =&gt; 'group_by_string',
    'model' =&gt; 'App\Models\User',
    'group_by_field' =&gt; 'name',
    'chart_type' =&gt; 'pie',
    'filter_field' =&gt; 'created_at',
    'filter_period' =&gt; 'month', // show users only registered this month
];

$chart2 = new LaravelChart($chart_options);

$chart_options = [
    'chart_title' =&gt; 'Transactions by dates',
    'report_type' =&gt; 'group_by_date',
    'model' =&gt; 'App\Models\Transaction',
    'group_by_field' =&gt; 'transaction_date',
    'group_by_period' =&gt; 'day',
    'aggregate_function' =&gt; 'sum',
    'aggregate_field' =&gt; 'amount',
    'chart_type' =&gt; 'line',
];

$chart3 = new LaravelChart($chart_options);

return view('home', compact('chart1', 'chart2', 'chart3'));

}

View:

@extends('layouts.app')

@section('content')

Dashboard
            <div class="card-body">

                <h1>{{ $chart1-&gt;options['chart_title'] }}</h1>
                {!! $chart1-&gt;renderHtml() !!}

            <hr>

                <h1>{{ $chart2-&gt;options['chart_title'] }}</h1>
                {!! $chart2-&gt;renderHtml() !!}

                <hr>

                <h1>{{ $chart3-&gt;options['chart_title'] }}</h1>
                {!! $chart3-&gt;renderHtml() !!}

            </div>

        </div>
    </div>
</div>
@endsection

@section('javascript') {!! $chart1->renderChartJsLibrary() !!}

{!! $chart1->renderJs() !!} {!! $chart2->renderJs() !!} {!! $chart3->renderJs() !!} @endsection

Laravel Charts - Users by Months

Laravel Charts - Users by Names

Laravel Charts - Transactions by Dates


License

The MIT License (MIT). Please see License File for more information.


More from our LaravelDaily Team

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.