Q:

how to display multiple sum with chart js and laravel?

I have three table
Table drics 
Table country_dric

Table Countries

I just display country name with sum legal from table drics.
I want to display sum column legal, illegal, applicant and mandatory from table drics with country name.
How to display the sum of each column from table drics?
my 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 sum'))->groupby('name')
            ->whereYear('drics.created_at', $year)->get();

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

        foreach ($drics as $key => $value) {
            $dric_title[$key]=$value->name;
            $dric[$key]=$value->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: '# ',
                data: @json($dric),
                backgroundColor: "rgba(0,31,68,0.8)",
                borderColor: "rgb(167, 105, 0)",
                borderWidth: 1,
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

A:

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

