Reload chart data asynchronously

I want to create a page with a bar chart, and a dropdown in which selecting an option should asynchronously reload the bar chart.

Try 1:

$this->emit('chartUpdated', 'machine-monthly-chart', $this->chart);

I need to pass chart as an array to this code but there is no toArray() method in LarapexChart! Then I tried Livewire to handle the asynchronous updates without relying on toArray().

Try 2:

$this->chartData = $chart->getOptions(); // Get options to pass to JavaScript

which resulted in getOptions() not available error. So, instead of using getOptions(), I directly used the configuration methods available in Larapex Charts and then tried to convert it to JSON in the view.

Try 3:

    // Convert chart configuration to JSON
     $this->chartConfig = $chart->toJson();

    // In Blade View: use JS to initialize and update the chart with the config passed from Livewire component
    <script>
        document.addEventListener('livewire:load', function () {
            let chartOneConfig = @json($chartConfig);

            let chartOne = new ApexCharts(document.querySelector("#machine-monthly-chart"), chartOneConfig);
            chartOne.render();

            Livewire.on('chartOneUpdated', function (data) {
                chartOne.updateOptions(data);
            });
        });
    </script>

which resulted in the error: Property type not supported in Livewire for property: [{"headers":{},"original": {"id":"....

Any help?

marineusde / larapex-charts

Reload chart data asynchronously #30