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":"....
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:
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:
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:
which resulted in the error: Property type not supported in Livewire for property: [{"headers":{},"original": {"id":"....
Any help?