Is there a way to refresh the chart when user change settings

[AcidDiz]

Is there a way to refresh chart after user change a value?

In this case i have three buttons that set different format for created_at field. I tried different solutions, but it doesn't seem to refresh the chart view.

Any tip? Please.

<?php

namespace App\Http\Livewire\Dashboard\Statistics\Charts\Pie;

use App\Models\LandingPageStatistics\VisitorsStatistic;
use Asantibanez\LivewireCharts\Facades\LivewireCharts;
use Asantibanez\LivewireCharts\Models\ColumnChartModel;
use Carbon\Carbon;
use Livewire\Component;

class VisitorsStatisticsPieCharts extends Component
{
    public $page;
    public $showDataLabels = true;
    public $firstRun = true;
    public $grouped ='d/m';
    public $colors = [
    ];

    public $newGroupBy;

    protected $listeners = [
        'refreshChart' => 'render',
    ];

    public function setGroupBy($value){

        $this->newGroupBy = $value;

        dd($this->newGroupBy); // Here I see Input has submitted

        $this->emit('refreshChart');

    }

    public function render()
    {

        $visits = VisitorsStatistic::where('page_id', $this->page->id)->orderBy('created_at')->get();

        $columnChartModel =  $visits->groupBy(function($date){

        // NEED SOMTHING THAT SET NEW FORMAT
        // if(isset($this->newGroupBy)){
        //     $this->grouped = $this->newGroupBy;
        // }else{
        //     $this->grouped;
        // }

            return Carbon::parse($date->created_at)->format($this->grouped);

        })->reduce(
            function($columnChartModel, $data){
                $visit = Carbon::parse($data->first()->created_at)->format('D d/m/y');
                $value = $data->count();

                return $columnChartModel->addColumn($visit, $value, $this->colors);
            }, LivewireCharts::columnChartModel()
            ->setTitle(__('contents.visitors_statistics'))
            ->setAnimated($this->firstRun)
            ->setLegendVisibility(false)
            ->setDataLabelsEnabled($this->showDataLabels)
            ->setColors(['#0984e3'])
            ->setColumnWidth(20)
        );

        return view('livewire.dashboard.statistics.charts.pie.visitors-statistics-pie-charts',[
            'columnChartModel' => $columnChartModel,
        ]);
    }
}
}

[sytheveenje]

Thumbs up, I also need a solution for this.

[isaacdarcilla]

Yes, how can I achieve this? @acidiz how did you do it?

[kodyxgen]

@AcidDiz did you try adding the reactiveKey() ?

<livewire:livewire-column-chart
    key="{{ $columnChartModel->reactiveKey() }}"
    :column-chart-model="$columnChartModel"
/> 

[itsmeduard]

Following this thread. I need it too.

[isaacdarcilla]

@AcidDiz thanks. It worked!

[khadraoui-ines]

HI, I am getting svg errors ( index.js: Error:

[isaacdarcilla]

The length has to be a number.

[khadraoui-ines]

The trouble is that I am not handling svg elements It's happening inside the chart So I am confuse why I am not getting this error in the first try, but ones I try to refresh the chart it's happening Ps: the charts are refreshing correctly

[uziins]

Have similiar issue, same thing happened when i try to resize window after getting those error

[RAlcaino]

Hello,

Do you have any solution? I'm experiencing the same thing.

[nikunj-7span]

@uziins I'm getting the same issue, Would you happen to have any idea how to solve it?