Laravel how to pass data into Chart.js?

Question

I want to pass data into Chart.js, however nothing appear on the card. How to solve this problem adn what is the correct way to pass data into Chart.js? I cant directly put the data into the script in this way.

Controller

public function ViewAnalytic(){

        $id = Auth::user()->id;
        $electrical = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Electrical System')->count();
        $pest = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Plumbing System')->count();
        $plumbing = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Pest Infectations')->count();
        $structural = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Structural Repairs')->count();
        $appliances = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Electrical Appliances')->count();
        $others = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Others')->count();

        return view('analytic.analytic-page', compact('total_num', 'vacant', 'rented', 'user', 'paid', 'unpaid', 
        'electrical', 'pest', 'plumbing', 'structural', 'appliances', 'others'));
    }

view.blade.php

<div class="card-body px-3 py-4-5">
    <canvas id="myChart" width="200" height="200"></canvas>
</div>

Script

   <script>
        const data = {
        labels: [
            'Electrical System',
            'Plumbing System',
            'Pest Infections',
            'Structural Repairs',
            'Electrical Appliances',
            'Others'
        ],
        datasets: [{
            label: 'My First Dataset',
            data: [{!!$electrical!!}, {!!$plumbing!!}g, {!!$pest!!}, {!!$structural!!}, {!!$appliances!!}, {!!$others!!}],
            backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(204, 102, 235)',
            'rgb(255, 205, 86)',
            'rgb(0, 204, 102)',
            'rgb(102, 153, 255)',
            'rgb(191, 0, 205)'
            ],
            hoverOffset: 4
        }]
        };
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'pie',
            data: data,
        });
    </script>

Muhammad Sajidul Islam · Accepted Answer · 2022-09-23 17:08:15Z

1

Make an ajax request in the view file, then push the values in the chart. And you can try this

{!! json_encode($electrical) !!}

Have a look at this tutorial

https://www.codeleaks.io/ajax-get-post-request-in-laravel/

edited Sep 23, 2022 at 17:08

answered Sep 18, 2022 at 13:19

Muhammad Sajidul Islam

2802 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wesley Over a year ago

HI thanks for your suggestion, but I'm not sure about how to make the ajax request in my case

Muhammad Sajidul Islam Over a year ago

Follow this, you will get the idea hope so.. codeleaks.io/ajax-get-post-request-in-laravel

Rado · Accepted Answer · 2022-09-23 18:07:58Z

0

{!!$plumbing!!}g

I think that you can try removing this "g" in your data. At first look everything is correct.

edited Sep 23, 2022 at 18:07

answered Sep 23, 2022 at 17:49

Rado

415 bronze badges

Collectives™ on Stack Overflow

Laravel how to pass data into Chart.js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related