I am developing the backend of an application in Laravel 8 with Livewire 2 and I am having problems being able to render a graph in the view. The data that the graph must contain is updated through the inputs that send the information to the fetchData function.

I currently use Ariel Mejia’s Larapex Charts package.

Could you please help me figure out why I can’t display the graph in the view?

Thank you so much.

This is the code of my component

<?php

namespace AppHttpLivewireCharts;

use LivewireComponent;
use AppModelsProducto;
use AppModelsPedido;
use DB;
use LarapexChart;

class SalesChart extends Component
{
    public $producto_id = '';
    public $product_name = '';
    public $desde = '';
    public $hasta = '';
    public $labels = [];
    public $datasets = [];
    public $pedidos;

    protected $chart = '';

    public function render()
    {
        $productos = Producto::all();
        return view('livewire.charts.sales-chart', compact('productos'));
    }

    public function fetchData()
    {
        if (!$this->producto_id || !$this->desde || !$this->hasta) {
            $this->resetChartData();
            return;
        }

        $producto = Producto::find($this->producto_id);

        if (!$producto) {
            $this->resetChartData();
            return;
        }

        $this->product_name = $producto->nombre;

        $this->pedidos = Pedido::select(DB::raw('DATE(created_at) as fecha'), DB::raw('COUNT(*) as total'))
            ->whereHas('itemPedidos', function ($query) {
                $query->where('producto_id', $this->producto_id);
            })
            ->whereBetween('created_at', [$this->desde, $this->hasta])
            ->groupBy(DB::raw('DATE(created_at)'))
            ->get();

        $this->labels = $this->pedidos->pluck('fecha')->toArray();
        $this->datasets = $this->pedidos->pluck('total')->toArray();

        $this->chart = LarapexChart::barChart()
            ->setTitle($this->product_name)
            ->addData($this->product_name, $this->datasets)
            ->setColors(['#ff6384'])
            ->setXAxis($this->labels);

        return $this->chart;
    }

    public function getChartProperty()
    {
        return $this->chart;
    }

    private function resetChartData()
    {
        $this->product_name = '';
        $this->labels = [];
        $this->datasets = [];
        $this->chart = null;
    }
    
    public function updated()
    {
        $this->fetchData();
    }
}

This is the code of my view

<div>
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label for="producto">Producto</label>
                <select wire:model.lazy='producto_id' class="form-control">
                    <option value="">Selecciona un producto</option>
                    @foreach ($productos as $producto)
                        <option value="{{ $producto->id }}">{{ $producto->nombre }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="desde">Fecha inicial</label>
                <input type="date" wire:model.lazy='desde' class="form-control">
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label for="hasta">Fecha final</label>
                <input type="date" wire:model.lazy='hasta' class="form-control">
            </div>
        </div>
        
        <div class="col-md-12">
            @if ($pedidos)
                <h3>Total de pedidos del producto: {{ $product_name }}</h3>
                <ul>
                    @foreach ($pedidos as $pedido)
                        <li>{{ $pedido->fecha }}: {{ $pedido->total }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
        
        <div class="col-md-12">
            @if ($this->chart)
                {!! $this->chart->container() !!}
            @endif
        </div>
    </div>
</div>

@push('scripts')
    @if ($this->chart instanceof ArielMejiaDevLarapexChartsBarChart)
        <script src="{{ $this->chart->cdn() }}"></script>
        {{ $this->chart->script() }}
    @endif
@endpush