Best way to graph and chart?

#1

I am trying to get all in on Livewire/Alpine so am trying my hardest to keep Vue out of my project. So far so good!..

My app uses graphs quite a bit and I am trying to figure out the best way to get some interactive graphs working without having to resort back to Vue.

I think I am right in thinking we can build non-interactive graphs quite easily using standard JS libraries.

I am specifically looking to have a graph with options that I can change and ideally be able to update the graph without any kind of reload. With a vue graph, this means that the data lines morph to reflect the new inputs after an update.

#2

Have you already sorted this out?

I’m using Laravel Charts with Charts.js. So far I can display a chart but after updating the chart doesn’t update (loading animation).

public function render()
{
    $chart_data = $this->getChartData();

    $chart = new MyChart();
    $chart->labels($chart_data->pluck('label'));
    $chart->dataset('Total', 'bar', $chart_data->pluck('total'))->backgroundColor('blue');
    $chart->dataset('Answered', 'bar', $chart_data->pluck('answered'))->backgroundColor('green');
    $chart->dataset('NotAnswered', 'bar', $chart_data->pluck('not_answered'))->backgroundColor('grey');
    $chart->dataset('Negative feedback', 'bar', $chart_data->pluck('negative_feedback'))->backgroundColor('red');

    return view('livewire.answeres',
        [
            'chart' => $chart
        ]);
}
#3

I found this workaround but can’t get it up and working. https://github.com/livewire/livewire/issues/774