[Chartjs]-How to display multiple sum with chart js and laravel?

by

3👍

✅

Try this

Your controller:

$drics =DB::table('countries')
        ->join('country_dric','countries.id','country_dric.country_id')
        ->join('drics','drics.id','country_dric.dric_id')
        ->select('name',\DB::raw('sum(legal) as legal_sum')
        ,\DB::raw('sum(ilegal) as ilegal_sum')
        ,\DB::raw('sum(applicant) as applicant_sum')
        ,\DB::raw('sum(mandatory) as mandatory_sum'))->groupby('name')
        ->whereYear('drics.created_at', $year)->get();

    $dric_title=[];
    $dric=[];

    foreach ($drics as $key => $value) {
        $dric_title[$key]=$value->name;
        $dric['legal'][$key]=$value->legal_sum;
        $dric['ilegal'][$key]=$value->ilegal_sum;
        $dric['applicant'][$key]=$value->applicant_sum;
        $dric['mandatory'][$key]=$value->mandatory_sum;
    }

    return view('home.home', compact(' 'dric', 'dric_title'));

js code:

<script>
     var ctx = document.getElementById('dric').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: @json($dric_title),
            datasets: [{
                label: 'Legal',
                data: @json($dric['legal']),
                backgroundColor: "rgba(0,31,68,0.8)",
                borderColor: "rgb(167, 105, 0)",
                borderWidth: 1,
            }, {
                label: 'Ilegal',
                data: @json($dric['ilegal']),
                backgroundColor: "rgba(0,31,68,0.8)", // Change the color to make it different
                borderColor: "rgb(167, 105, 0)",
                borderWidth: 1,
            }, {
                label: 'Applicant',
                data: @json($dric['applicant']),
                backgroundColor: "rgba(0,31,68,0.8)", // Change the color to make it different
                borderColor: "rgb(167, 105, 0)",
                borderWidth: 1,
            }, {
                label: 'Mandatory',
                data: @json($dric['mandatory']),
                backgroundColor: "rgba(0,31,68,0.8)", // Change the color to make it different
                borderColor: "rgb(167, 105, 0)",
                borderWidth: 1,
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

You can use @foreach loop if you want too

Leave a comment