Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021

Seperti yang sudah kita ketahui, fitur Report di PHPMaker 2021 sudah dilengkapi dengan Chart, sehingga kita bisa menambahkan Chart tersebut pada halaman Report.

Secara default atau standar, di setiap Chart yang di-generate oleh PHPMaker, akan menampilkan Data Label, baik Chart tipe Bar, maupun Char tipe Pie. Apa sih, Data Label itu?

Seperti namanya, Data Label adalah data yang ditampilkan dalam bentuk label, dan posisinya berada di atas atau menutupi area Chart. Jika datanya lebih panjang dari area Bar atau Pie-nya, maka Chart menjadi tidak nyaman dipandang.

Jika kondisi itu terjadi, maka kita perlu menyembunyikan Data Label tersebut. Toh, kita bisa menampilkan nilainya dengan bantuan Tooltip milik Chart itu, dengan cara menggeser kursor mouse (hover) ke area Bar atau Pie yang bertalian.

Pertanyaan selanjutnya adalah, bagaimana cara menyembunyikan Data Label yang berada pada area Bar atau area Pie tadi?

Hohoho, bukan PHPMaker namanya jika kita tidak dapat memberikan solusi untuk pertanyaan ini.

PHPMaker 2021 sudah menyediakan server event yang bernama Chart_Rendered. Seperti namanya, server event ini akan dieksekusi oleh sistem ketika sebuah Chart sedang di-render. Kita dapat menyembunyikan data label tersebut cukup dengan hanya menambahkan sedikit kode PHP berikut.

Katakanlah pada project demo2021, kita ingin menyembunyikan data label pada Chart milik Report yang bernama Quarterly Orders by Product. Maka cukup copy-paste kode berikut ke dalam server event Chart_Rendered:

// var_dump($this->ID); // view chart ID
    $chartData = &$chart->Data;
    $chartOptions = &$chart->Options;
// var_dump($chartData, $chartOptions); // View chart data and options
    if ($this->ID == "Quarterly_Orders_By_Product_OrdersByCategory") { // Check chart ID
     	// Your code to customize $chartData and/or $chartOptions;
       	// $chartData["labels"][0] = ""; // remove labels index 0 if necessary
        $chartOptions["plugins"]["datalabels"] = false; // remove label contains value on bar
    }
    

Perhatikan kode di atas. Satu-satunya param untuk server event Chart_Rendered ini adalah object $chart yang bisa kita optimalkan untuk mengekspos beberapa Property yang terkait dengan Chart yang kita butuhkan.

Untuk mengekspos data milik Chart tersebut, kita menampungnya ke dalam variabel $chartData dengan cara mengekspos property Data milik object $chart.

Jika kita ingin menyembunyikan data label, maka kita cukup mengekspos property Options milik object $chart tadi. Selanjutnya kita cukup menugaskan property datalabels yang berada di bawah property plugins dengan nilai false untuk menyembunyikan data label tersebut.

Begitu mudah dan cepatnya, bukan? 🙂