Laravel - Get data from 2 different table to display as google pie chart

Question

I want to display a pie chart consist of how many booking based on it booking status. But the problem is my booking table consist of booking status id only. When I try to get the data, it return error where 'Pie chart should have a first column of type string'. Booking status's name is on another different table. I'm quite new with laravel framework so can anyone give me any guide on getting data from 2 different table?

Here my controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LaravelGoogleGraph extends Controller
{


    function index()
    {
     $data = DB::table('booking')
       ->select(
        DB::raw('base_booking_status_id as status'),
        DB::raw('count(*) as booking_id'))
       ->groupBy('status')
       ->get();
     $array[] = ['Status', 'Total'];
     foreach($data as $key => $value)
     {
      $array[++$key] = [$value->status, $value->booking_id];
     }
     return view('google_pie_chart')->with('status', json_encode($array));
    }
}
?>

Here my blade

<!DOCTYPE html>
<html>
 <head>
  <title>Make Google Pie Chart in Laravel</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <style type="text/css">
   .box{
    width:800px;
    margin:0 auto;
   }
  </style>
  <script type="text/javascript">
   var analytics = <?php echo $status; ?>

   google.charts.load('current', {'packages':['corechart']});

   google.charts.setOnLoadCallback(drawChart);

   function drawChart()
   {
    var data = google.visualization.arrayToDataTable(analytics);
    var options = {
     title : 'Booking Status'
    };
    var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
    chart.draw(data, options);
   }
  </script>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center">Booking Report</h3><br />
   
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Booking Status</h3>
    </div>
    <div class="panel-body" align="center">
     <div id="pie_chart" style="width:750px; height:450px;">

     </div>
    </div>
   </div>
   
  </div>
 </body>
</html>

Answer 1

You will need to do a join in your query. Something like this:

$data = DB::table('booking')
   ->select([
      'booking.base_booking_status_id as status_id',
      'base_booking_status.name as status_name',
      'booking.id as booking_id',
    ])
    ->leftJoin('base_booking_status', 'booking.base_booking_status_id', '=', 'base_booking_status.id')
    ->groupBy('booking.status')
    ->get();

I've used the name 'base_booking_status' for the statuses table. You will need to update this to match the actual name of the other table in the select columns as well as in the first and third parameters of the join. You will also need to update the name of the column you want to display, which I have called 'name' here.

Full documentation for query builder joins can be found at https://laravel.com/docs/master/queries#joins

Laravel - Get data from 2 different table to display as google pie chart

Question

1 answers

solution1
1 ACCPTED 2020-07-13 10:23:29

Laravel - Get data from 2 different table to display as google pie chart

Question

1 answers

solution1 1 ACCPTED 2020-07-13 10:23:29

solution1
1 ACCPTED 2020-07-13 10:23:29