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

by

0👍

✅

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>

Leave a comment