Graph issue

[blondie63]

I discovered a problem on graphs like this, as you can see there are some white areas indicated by the arrow.
It is not a data problem because by doing the page refresh several times, with the data that does not vary, these white areas change position..
Any ideas?

[jcastroa87]

Hello @blondie63

Can you share the controller code to replicate the issue.

Thanks.

Cheers.

[blondie63]

Controller:

<?php

namespace App\Http\Controllers\Admin\Charts;

use App\Models\Event;
use Backpack\CRUD\app\Http\Controllers\ChartController;
use Carbon\Carbon;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
use Illuminate\Support\Facades\Session;

/**
 * Class CompanyEventsChartController
 * @package App\Http\Controllers\Admin\Charts
 * @property-read \Backpack\CRUD\app\Library\CrudPanel\CrudPanel $crud
 */
class CompanyEventsYearChartController extends ChartController
{
    public function setup()
    {
        $this->chart = new Chart();

        // MANDATORY. Set the labels for the dataset points
        $labels = [];

        setlocale(LC_TIME, 'it_IT');
        Carbon::setLocale('it');

        for ($i = 0; $i < 12; $i++) {
            $currentMonth = Carbon::now()->startOfMonth()->subMonths($i);
            $labels[] = ucfirst($currentMonth->isoFormat('MMMM')) . ' ' . $currentMonth->year;
        }

        $this->chart->labels(array_reverse($labels));

        // RECOMMENDED. Set URL that the ChartJS library should call, to get its data using AJAX.
        $this->chart->load('/company/charts/company-events-year');

        // OPTIONAL
        $this->chart->minimalist(false);
        $this->chart->displayLegend(true);

        $this->chart->options([
            'scales' => [
                'yAxes' => [
                    [
                        'ticks' => [
                            'beginAtZero' => true,
                            // 'stepSize' => 1, // Imposta il passo a 1 per assicurare solo numeri interi
                            'precision' => 0 // Imposta la precisione a 0 per mostrare solo numeri interi
                        ]
                    ]
                ]
            ]
        ]);
    }

    public function data()
    {
        $events = [];
        $company_id = Session::get('company');
        $currentMonth = Carbon::now();

        // Iteriamo per i dodici mesi precedenti, inclusivo del mese corrente
        for ($i = 0; $i < 12; $i++) {
            // Calcoliamo il mese corrente nel ciclo
            $month = $currentMonth->startOfMonth()->subMonths($i)->month;
            $currentYear = $currentMonth->year;

            $events[] = Event::whereYear('event_dt_in', $currentYear)
            ->whereMonth('event_dt_in', $month)
            ->whereIn('user_id', function ($query) use ($company_id) {
                  $query->select('id')
                        ->from('users')
                        ->where('company_id', $company_id);
              })
            ->count();

            // Ripristiniamo il mese corrente
            $currentMonth->addMonths($i);
        }

        // Invertiamo gli array per mantenere l'ordine corretto dei mesi
        $events = array_reverse($events);

        $this->chart->dataset(trans('backpack::ash_base.events'), 'line', $events)
        ->color('rgb(255, 193, 7)')
        ->backgroundColor('rgba(255, 193, 7, 0.4)');
    }
}

DASHBOARD BLADE:

<?php

namespace App\Http\Controllers;

use Carbon\Carbon;
use Illuminate\Routing\Controller;

use App\Models\Company;
use App\Models\Contract;
use App\Models\User;
use App\Models\Event;
use Backpack\CRUD\app\Library\Widget;

class AdminController extends Controller
{
    protected $data = []; // the information we send to the view

    /**
     * Create a new controller instance.
     */
    public function __construct()
    {
        $this->middleware(backpack_middleware());
    }

    /**
     * Show the Supervisor dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function dashboard()
    {
        $this->data['title'] = trans('backpack::ash_base.dashboard'); // set the page title
        $this->data['breadcrumbs'] = [
            trans('backpack::crud.admin') => backpack_url('dashboard'),
            trans('backpack::ash_base.dashboard') => false,
        ];

        // data for widget in dashboard
        $this->data["counts"] = [
           "companies" => [
            "entity" => trans('backpack::ash_base.customers'),
            "count" => Company::all()->count(),
           ],
           "users" => [
            "entity" => trans('backpack::ash_base.users'),
            "count" => User::all()->count(),
           ],
           "contracts_active" => [
            "entity" => trans('backpack::ash_base.contracts_actives'),
            "count" => Contract::where('status_id', 1)->count(),
           ],
           "contracts_expired" => [
            "entity" => trans('backpack::ash_base.contracts_expired'),
            "count" => Contract::where('end_date', '<', Carbon::now())->count(),
           ],
        ];

        Widget::add([
            'type'    => 'div',
            'class'   => 'row pt-2',
            'content' => [
                [
                    'type'        => 'progress',
                    'class'       => "card text-white bg-success mb-2",
                    'value'       => $this->data['counts']['companies']['count'],
                    'description' => $this->data['counts']['companies']['entity'],
                    'progress'    => 100,
                ],
                [
                    'type'        => 'progress',
                    'class'       => "card text-white bg-info mb-2",
                    'value'       => $this->data['counts']['users']['count'],
                    'description' => $this->data['counts']['users']['entity'],
                    'progress'    => 100,
                ],
                [
                    'type'        => 'progress',
                    'class'       => "card text-white bg-warning mb-2",
                    'value'       => $this->data['counts']['contracts_active']['count'],
                    'description' => $this->data['counts']['contracts_active']['entity'],
                    'progress'    => 100,
                ],
                [
                    'type'        => 'progress',
                    'class'       => "card text-white bg-primary mb-2",
                    'value'       => $this->data['counts']['contracts_expired']['count'],
                    'description' => $this->data['counts']['contracts_expired']['entity'],
                    'progress'    => 100,
                ],
            ],
        ]);


        $now = Carbon::now();
        $currentMonth = ucfirst($now->isoFormat('MMMM'));
        Widget::add([
            'type'    => 'div',
            'class'   => 'row pt-2',
            'content' => [
                                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorEventsYearChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.annual_chart', ['entity' => trans('backpack::ash_base.events')]),
                    ],
                ],
                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorEventsMonthChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.monthly_chart', ['entity' => trans('backpack::ash_base.events'), 'month' => $currentMonth]),
                    ],
                ],
                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorUsersYearChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.new_users_lastmonths', ['entity' => trans('backpack::ash_base.users')]),
                    ],
                ],
                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorUsersMonthChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.new_users_lastmonth', ['entity' => trans('backpack::ash_base.users'), 'month' => $currentMonth]),
                    ],
                ],
                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorRequestsYearChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.annual_chart', ['entity' => trans('backpack::ash_base.requests')]),
                    ],
                ],
                [
                    'type'       => 'chart',
                    'controller' => \App\Http\Controllers\Admin\Charts\SupervisorRequestsMonthChartController::class,
                    'class'   => 'card mb-2',
                    'wrapper' => ['class'=> 'col-md-6'] ,
                    'content' => [
                        'header' => trans('backpack::ash_base.monthly_chart', ['entity' => trans('backpack::ash_base.requests'), 'month' => $currentMonth]),
                    ],
                ],
        ]]);


        return view(backpack_view('dashboard'), $this->data);
    }

    /**
     * Redirect to the dashboard.
     *
     * @return \Illuminate\Routing\Redirector|\Illuminate\Http\RedirectResponse
     */
    public function redirect()
    {
        // The '/admin' route is not to be used as a page, because it breaks the menu's active state.
        return redirect(backpack_url('dashboard'));
    }
}

[karpalakllc]

The below screenshot is from the demo backpack.