Struggling with Livewire and chart

#1

I have a form with a dropdown where the user is choosing a product category. After submitting the form, I would like to display all the products related to this category with some charts that represents the analytics.

So far I’m using livewire for linking my Javascript and my PHP component.

After the form is submitted, I emit a signal :

window.livewire.emit('set:category', categoryId)

My component is looking like this :

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Category;

use Livewire\WithPagination;

class ChartsCategory extends Component

{

    public $category;

    public $products;

    use WithPagination;

    protected $listeners = [

        'set:category' => 'setCategory'

    ];

    public function render()

    {

        return view('livewire.charts-category');

    }

    public function setCategory($category)

    {

        $this->category= Category::find($category);

        $this->products= $this->category->products;

    }

}

For example, for a category, I may have two products. Each product has an array of analytic data that I would like to render.

$product->analytic(2) return a collection that is paginated. Two represents the number of items per page.

My blade component look like this

<div id="results-category">

    @isset($category)

    @foreach ( $products as $product)

    <div class="card">

        <div class="card-header">

            <h4>Product {{$product->name}}</h4>

        </div>

        {{ $product->analytic(2)->links('dashboard.pagination.pagination-links')}}

        @for ($i = 0; $i < $product->analytic(2)->perPage(); $i++)

            <figure>

                <canvas id="chart-analytic-{{$i}}-{{$product->id}}" height="200"></canvas>

            </figure>

            @endfor

    </div>

    @endforeach

    @endisset

</div>

So far, so good, I’m seeing well the pagination and the canvas for my charts.

However where I’m stuck is the process to get the analytic chart to render.
I need to use javascript but when I want to draw something, the canvas is null as it is not ready yet.
Moreover, when I’m changing the page (for example, I go to page 2), I don’t know how to render the specifics charts.

Could you please guide me ?

I tried to use Laravel Chart but without success.