Package to draw charts in Laravel with Chart.js
Package to generate Chart.js charts directly from Laravel/Blade, without interacting with JavaScript.
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')
@endsectionDashboard<div class="card-body"> <h1>{{ $chart1->options['chart_title'] }}</h1> {!! $chart1->renderHtml() !!} </div> </div> </div> </div>
@section('javascript') {!! $chart1->renderChartJsLibrary() !!} {!! $chart1->renderJs() !!} @endsection
composer require laraveldaily/laravel-charts
No additional configuration or other parameters yet.
You need to create
LaravelChartobject 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'));
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
belongsTorelationship's field
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' => 'transaction_date', 'group_by_period' => 'day', 'aggregate_function' => 'sum', 'aggregate_field' => 'amount', 'aggregate_transform' => function($value) { return round($value / 100, 2); } 'filter_field' => 'transaction_date', 'filter_days' => 30, // show only transactions for last 30 days 'filter_period' => 'week', // show only transactions for this week 'continuous_time' => 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_stringor
group_by_relationship;
model(required) - name of Eloquent model, where to take the data from;
conditions(optional, only for
linechart 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_byclause;
group_by_period(optional, only for
group_by_datereport type) - possible values are "day", "week", "month", "year";
relationship_name(optional, only for
group_by_relationshipreport type) - the name of model's method that contains
belongsTorelationship.
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_functionabove, 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_fieldabove - show only last
filter_daysdays of that field. Example, last 30 days by
created_atfield.
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
$chart_options = [ 'chart_title' => 'Transactions by user', 'chart_type' => 'line', 'report_type' => 'group_by_relationship', 'model' => 'App\Models\Transaction','relationship_name' => 'user', // represents function user() on Transaction model 'group_by_field' => 'name', // users.name 'aggregate_function' => 'sum', 'aggregate_field' => 'amount', 'filter_field' => 'transaction_date', 'filter_days' => 30, // show only transactions for last 30 days 'filter_period' => 'week', // show only transactions for this week
];
After you passed
$chartvariable, 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() !!}
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' => 'Users by names', 'report_type' => 'group_by_string', 'model' => 'App\Models\User', 'group_by_field' => 'name', 'chart_type' => 'pie', 'filter_field' => 'created_at', 'filter_period' => 'month', // show users only registered this month ]; $chart2 = new LaravelChart($chart_options); $chart_options = [ 'chart_title' => 'Transactions by dates', 'report_type' => 'group_by_date', 'model' => 'App\Models\Transaction', 'group_by_field' => 'transaction_date', 'group_by_period' => 'day', 'aggregate_function' => 'sum', 'aggregate_field' => 'amount', 'chart_type' => 'line', ]; $chart3 = new LaravelChart($chart_options); return view('home', compact('chart1', 'chart2', 'chart3'));
}
View:
@extends('layouts.app')@section('content')
@endsectionDashboard<div class="card-body"> <h1>{{ $chart1->options['chart_title'] }}</h1> {!! $chart1->renderHtml() !!} <hr> <h1>{{ $chart2->options['chart_title'] }}</h1> {!! $chart2->renderHtml() !!} <hr> <h1>{{ $chart3->options['chart_title'] }}</h1> {!! $chart3->renderHtml() !!} </div> </div> </div> </div>
@section('javascript') {!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!} {!! $chart2->renderJs() !!} {!! $chart3->renderJs() !!} @endsection
The MIT License (MIT). Please see License File for more information.