phplaravelchartschart.jspie-chart

Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution


My blade file code is:

@foreach ($radio_data as $data)
                            
                            <div style="text-align: center" class="row">
                                <div class="col-md-4 text-center" >
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                            
                                @php array_push($dataPoints, array("label"=> " $data->answer ", "y"=>  $data->num )); @endphp
    
                                
                                <p>{{ $data->answer }}: {{ $data->num }}</p>
    
                            @endforeach

I am fetching data in controller and send it to view.


Solution

  • Finally I did this with dynamic canvas id and update function. Here is my code:

    <div style="text-align: center" class="row">
                                <div class="col-md-4 text-center" >
                                    <canvas id="{{ $loop->index }}"></canvas>
                                </div>
                            </div>
    
                            
                            <script>
                              let {{ 'c'.$u }} =  new Chart(document.getElementById({{ $loop->index }}), {
                                type: 'pie',
                                data: {
                                    labels:  [],
                                    datasets: [{
                                        label: '# of Votes',
                                        data:  [],
                                        backgroundColor: [
                                            'rgba(255, 99, 132, 0.2)',
                                            'rgba(54, 162, 235, 0.2)',
                                            'rgba(255, 206, 86, 0.2)',
                                            'rgba(75, 192, 192, 0.2)',
                                            'rgba(153, 102, 255, 0.2)',
                                            'rgba(255, 159, 64, 0.2)'
                                        ],
                                        borderColor: [
                                            'rgba(255, 99, 132, 1)',
                                            'rgba(54, 162, 235, 1)',
                                            'rgba(255, 206, 86, 1)',
                                            'rgba(75, 192, 192, 1)',
                                            'rgba(153, 102, 255, 1)',
                                            'rgba(255, 159, 64, 1)'
                                        ],
                                        borderWidth: 1
                                    }]
                                },
                                options: {
                                    scales: {
                                        y: {
                                            beginAtZero: true
                                        }
                                    }
                                }
                                });
                            </script>
                           
                            
                            @foreach ($radio_data as $data)
    
                            <script>  {{ 'c'.$u }}.data.labels.push('{{ $data->answer }}'); {{ 'c'.$u }}.data.datasets.forEach((dataset) => {
                                dataset.data.push({{ $data->num }});
                            });
                            {{ 'c'.$u }}.update(); </script>