mardi 12 septembre 2017

Error using chartJs on laravel project

I am trying to use chartJs to draw a bar chart on my laravel project but I have been getting this error - "Failed to create chart: can't acquire context from the given item". I have tried debugging and I think everything looks okay.

This is my JS file

$(document).ready(function () {
    $.ajax({
        url: "",
        method: "GET",
        success: function(data) {
            console.log(data);
            var player = [];
            var score = [];

            for(var i in data) {
                player.push("Player " + data[i].playerid);
                score.push(data[i].score);
            }

            var chartdata = {
                labels: player,
                datasets : [
                    {
                        label: 'Player Score',
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: score
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });

        },
        error: function(data) {
            console.log(data);
        }
    });
});

This is my blade file

 <div id="chart-container">
        <canvas id="mycanvas"> </canvas>
        <p>Hi</p>
    </div>

This is my controller

 public function totalTaxPaidByLga(){
        $query = DB::select("select SUM(a.settlement_amount) as totalTaxPaid, d.local_name  from settlements as a, assessments as b,
        property_details as c, locals as d
        where a.assessment_ref = b.assessment_ref  and
                b.property_id = c.id and
                c.lga_id = d.local_id
        GROUP BY d.local_id");
        foreach ($query as $row) {
            $data[] = $row;
        }

        print json_encode($data);

    }



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire