Laravel-Backpack - How to re-render Ajax charts - ajax

Question

I'm trying to display some AJAX loaded charts that change content when the user changes a filter without reloading the page. Followed Backpack and Laravel charts docs but I'm kinda stuck on how to re-render the chart without reloading the page. This is what I have so far:
routes:
Route::get('charts/test-chart', 'Charts\TestChartChartController#response')->name('charts.test-chart.index');
Route::get('charts/test-chart-ajax', 'Charts\TestChartChartController#data');
controller:
public function setup()
{
$this->chart = new Chart();
$labels = [];
for ($days_backwards = 30; $days_backwards >= 0; $days_backwards--) {
if ($days_backwards == 1) {
}
$labels[] = $days_backwards.' days ago';
}
$this->chart->labels($labels);
$this->chart->load(backpack_url('charts/test-chart-ajax'));
}
public function data(Request $request)
{
for ($days_backwards = 30; $days_backwards >= 0; $days_backwards--) {
$users[] = \App\Models\User::whereDate('created_at', today()
->subDays($days_backwards))
->count();
}
$this->chart->dataset('Users', 'line', $users)
->color('rgb(77, 189, 116)')
->backgroundColor('rgba(77, 189, 116, 0.4)');
return $this->chart->api();
}
view:
#extends(backpack_view('blank'))
#php
#extends(backpack_view('blank'))
#php
Widget::add([
'type' => 'event_select',
'view' => 'event_select',
]);
Widget::add(
[
'type' => 'div',
'class' => 'row',
'content' => [ // widgets
[ 'type'=> 'chart', 'controller' => \App\Http\Controllers\Admin\Charts\TestChartChartController::class ],
]
]);
#endphp
#section('content')
#endsection
js: (here is the part where I'm lost)
#push('after_scripts')
<script>
$(document).ready(function() {
$('.eventSelector').each(function(index, element) {
selected_event = this.getAttribute('selected_event');
this.value = selected_event;
});
$('.eventSelector').on('change', changeType);
});
function changeType() {
var eventId = $('.eventSelector').val();
$.ajax(
{
This is the part where I'm stuck, I don't know how to make the ajax call to reload the chart without reloading the page.
});
}
</script>
#endpush
It works alright the first time but I don't really know how to re-render the chart when the user changes the filter. Apparently there is something in the docs here : https://v6.charts.erik.cat/api_charts.html#update-the-chart-after-rendering but I have no idea how to use that api_url mentioned. At the end of the documentation there is a link to a sample, but now seems broken (404)
Any help would be greatly appreciated. Thanks!
***EDIT: I think I made some progress, but now I get an error I haven't been able to solve:
I added this to the script.blade.js file and it looks like its refreshing the table (because my endpoint is getting called twice):
var original_api_url = {{ $chart->id }}_api_url;
{{ $chart->id }}_refresh(original_api_url + "?year=22");
But I get this error on the console:
Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'datasets')