Chart.js undefined variable in view

Question

I want to crate a graph using chart.js and show it in my view. But after parsing the data to the view, it always come with undefined variable (in my case, bulan and pendapatan is undefined).

This is my controller to parse the data

$query = DB::table("transaksipenjualan")->select(DB::raw('EXTRACT(MONTH FROM tanggaltransaksi) AS Bulan, SUM(total) as Pendapatan'))
        ->where('tanggalTransaksi', 'LIKE', '%'.$request->tahun.'%')
        ->groupBy(DB::raw('EXTRACT(MONTH FROM tanggaltransaksi)'))
        ->get();

        $count=count($query);
        $label  = [];
        $data   = [];

        for($i=0;$i<$count;$i++)
        {
            $label[$i]  = $query[$i]->Bulan;
            $data[$i]   = $query[$i]->Pendapatan;
        }

        return view('printPreview/pendapatanBulanan',  ['data'=>$query, 'bulan'=>$label, 'pendapatan'=>$data]);

And this is my script to get the data

 var ctx = document.getElementById("canvas").getContext('2d');
          var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: bulan,
                datasets: [{
                    label: 'Nilai Pendapatan',
                    data: pendapatan,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

I don't know very well how to pass the data to a script, so I need some advice. Thanks!

JoshG · Accepted Answer · 2019-05-12 08:25:46Z

2

Have you tried using {{ json_encode($php_variable) }}? For example:

 var ctx = document.getElementById("canvas").getContext('2d');
          var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {{ json_encode($bulan) }},
                datasets: [{
                    label: 'Nilai Pendapatan',
                    data: {{ json_encode($pendapatan) }},
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

answered May 12, 2019 at 8:25

JoshG

6,7752 gold badges42 silver badges64 bronze badges

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

3 Comments

nakov Over a year ago

this is dirty solution, but one of them for sure. Another one is to use a package like this and transform PHP vars to JavaScript.

JoshG Over a year ago

@nakov I agree, that is a good package. But if the OP only needs those two variables, the Blade syntax might be sufficient.

nakov Over a year ago

I agree, but then again, having JavaScript code in a blade view, it is ugly to me :)

Collectives™ on Stack Overflow

Chart.js undefined variable in view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related