Tạo biểu đồ đơn giản trên PHP không cần code javascript Laravel Charts

Chart(biểu đồ) thường được sử dụng để biểu diễn số liệu bởi tính trực quan của nó. Trong kỷ nguyên kĩ thuật số hiện nay các số liệu đóng vai trò rất quan trọng, thông qua các số liệu ta có thể phân tích và phán đoán để đưa ra các quyết định phù hợp. Tuy nhiên con người và những con số chưa bao giờ thân thiện với nhau, việc nhìn vào đống dữ liệu chỉ toàn là những con số sẽ rất khó để chúng ta có thể nhận ra được điều gì. Do đó biểu đồ xuất hiện để trực quan hóa dữ liệu khiến nó trở nên thân thiện hơn.

Giới thiệu

Đã có rất nhiều các bài viết giới thiệu về các thư viện biểu đồ như chart.js, google chart hay highCharts,... Đây là các thư viện javascript và để sử dụng chúng ta cũng phải xử lý bằng javascript. Hôm nay, mình sẽ chia sẻ với các bạn cách sử dụng biểu đồ trong ứng dụng laravel mà không cần viết bất kì dòng code javascript nào thông qua sử dụng ConsoleTVs/Charts package. Bài viết này được dựa trên document hướng dẫn trong github
Đây là link github của ConsoleTVs/Charts package https://github.com/ConsoleTVs/Charts.

Tạo biểu đồ quá đơn giản và nhanh chóng bằng PHP

Đầu tiên các biểu đồ vẫn được thực hiện bởi javascript thông qua các thư viện chart.js, highChart,... kể trên. Tuy nhiên các dữ liệu đưa vào biểu đồ lại được lấy từ database và javascript không thể lấy được dữ liệu đó trực tiếp từ database.Với việc sử dụng package Laravel Chart bạn đơn giản là làm mọi thứ trên PHP từ việc lấy dữ liệu tới xử lí dữ liệu và đưa vào biểu đồ. Laravel Chart cũng cung cấp nhiều hơn 12 loại biểu đồ

1. line chart
2. area chart
3. bar chart
4. pie chart
5. donut chart
6. geo chart
7. gauge chart
8. temp chart
9. percentage chart
10. progressbar chart
11. areaspline chart
12. scatter chart

Tạo template cho biểu đồ

Đầu tiên bạn cài đặt package bạn dùng composer

composer require consoletvs/charts:6.*

Sau đó đăng kí service provider trong app/config.php

ConsoleTVsChartsChartsServiceProvider::class,

Tiếp theo là tạo 1 template chart
Việc tạo 1 template chart sẽ giúp bạn có thể chia sẻ để có nhiều biểu đồ có thể dùng chung chẳng hạn nhiều biểu đồ có chung axes(trục), legend (chú thích), ...

Để tạo template chart rất đơn giản do nó có thể thực hiện bởi artisan

php artisan make:chart <Name> <Library?>

Ở đây <name> là tên của template chart còn library là thư viện nó sử dụng chính là những thư viện mình đã kể trên (chartjs, highcharts, google chart,...). Đây là 1 ví dụ tạo ra biểu đồ hiển thị về số lương các thú cưng theo từng category trong hệ thống dùng thư viện Chartjs

php artisan make:chart PetChart Chartjs

class PetChart sẽ được tạo ra trong thư mục app/Charts

<?php

namespace AppCharts;

use ConsoleTVsChartsClassesChartjsChart;

class TestChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();

        $this->options([
            'legend' => [
                'display' => true,
                'labels' => [
                    'fontColor' => 'rgb(255, 99, 132)'
                ],
            ],

        ]);

    }
}

Với template chart này tất cả các chart dùng chung đều có option hiển thị chú thích (legend) với màu sắc là màu hồng rgb(255, 99, 132). Bạn cũng có thể tùy biến nhiều hơn nữa thông qua việc tìm hiểu document của các thư viện biểu đồ như chartjs http://www.chartjs.org/docs/latest/

Tạo biểu đồ trong controller

Trong controller bạn có thể khởi tạo biểu đồ và pass nó qua view để hiển thị

<?php

namespace AppHttpControllers;

use AppChartsPetChart;

class PetController extends Controller
{
    public function index()
    {
        $chart = new PetChart();

        return view('welcome', compact('chart'));
    }
}

Tiếp theo là set labels và dataset cho biểu đồ

    $petCategories = PetCategory::leftJoin('pets', 'pet_categories.id', '=', 'pets.category_id')
                        ->selectRaw('pet_categories.*, count(pets.id) as countPets')
                        ->groupBy('pet_categories.id')
                        ->orderByDesc('countPets')
                        ->get();

    $labels = $petCategories->pluck('name');
    $values = $petCategories->pluck('countPets');

    $chart = new PetChart();
    $chart->labels($labels);
    $chart->dataset('Pet', 'bar', $values);

Dữ liệu truyền vào labels và dataset là các mảng nên ta sẽ dùng pluck sau khi query database
Trong datase ta truyền vào 3 tham số

• tên biểu đồ
• loại biểu đồ
• mảng giá trị tương ứng với từng labels

Ngoài ra còn một số api khác bạn có thể tham khảo bảng sau

Render Biểu đồ ra view

Trong controller vừa rồi ta đã gọi view welcome và pass chart vào view đó. Bây giờ trong file welcome.blade.php ta sẽ thực hiện render biểu đồ chart đó.
Đầu tiên ta cần load thư viện biểu đồ. Bạn có thể dùng cdn hoặc npm.
Đây là cdn của Chartjs được dùng trong ví dụ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js

Sau đó ta dùng 2 api là container và script để render biểu đồ

<!DOCTYPE html>
<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
    <div class="col-md-3">
        {!! $chart->container() !!}
    </div>
    {!! $chart->script() !!}

</div>
 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" charset="utf-8"></script>

</html>

Và đây là kết quả

Tất nhiên bạn có thể tùy biến biểu đồ của mình nhiều hơn nữa thông qua Laravel Chart và các thư viện chart. Ngoài Chartjs còn có một số thư viện khác được hỗ trợ

1. HighCharts https://www.highcharts.com/docs
2. FusionCharts https://www.fusioncharts.com/
3. ECharts https://ecomfe.github.io/echarts-doc/public/en/option.html#title
4. Frappe https://frappe.io/charts/
5. https://c3js.org/examples.html
   

Cảm ơn các bạn đã theo dõi bài viết!

Tham khảo

Laravel Charts https://charts.erik.cat/