Laravel - Google line chart not displaying

Question

I create a line chart where it shows a total sales by a date but it return an error 'Data column(s) for axis #0 cannot be of type string'. I check my viewsource and it return a right data for my line chart. I don't really know whats the problem. Can anyone help me with this, on how to display the chart?

My viewsoure data

["18th April 2020","64.50"],["19th April 2020","91.00"],["20th April 2020","644.70"],["21st April 2020","120.50"]

My Controller

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LaravelGoogleGraph extends Controller
{

  function index()
    {
      $data = DB::table('booking_detail')
        ->select(
            DB::raw('sum(total_price) as sums'), 
            DB::raw("DATE_FORMAT(date_sell,'%D %M %Y') as months"))
        ->groupBy('months')
        ->get();
     $array[] = ['Date', 'Sales'];
     foreach($data as $key => $value)
     {
      $array[++$key] = [$value->months, $value->sums];
     }
     return view('google_pie_chart')->with('months', json_encode($array));
    }
}
?>

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:600px; height:400px;
       }
      </style>
      <script type="text/javascript">
       var analytics = <?php echo $months; ?>

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

       google.charts.setOnLoadCallback(drawChart);

       function drawChart()
       {
        var data = google.visualization.arrayToDataTable(analytics);
        var options = {
         title : 'Booking Sales'
        };
        var chart = new google.visualization.LineChart(document.getElementById('line_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 Sales</h3>
    </div>
    <div class="panel-body" align="center">
     <div id="line_chart" style="width:550px; height:350px;">

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

I solve it already, seem like my sum return value as string instead of int/float. I add "+=0" inside the array statement for sums at the controller $array[++$key] = [$value->months, $value->sums+=0]; — Snowball

WhiteHat WhiteHat · Accepted Answer · 2020-07-17T11:09:44

the values for the line should be numbers, not strings...

remove the quotes around the second value in each row,
change...

["18th April 2020","64.50"]

to...

["18th April 2020",64.50]

also, arrayToDataTable has a second, optional boolean argument...

opt_firstRowIsData - Whether the first row defines a header row or not. If true, all rows are assumed to be data. If false, the first row is assumed to be a header row, and the values are assigned as column labels. Default is false.

if the first row in the array does not represent column headings,
then you should include true as the second argument, here...

var data = google.visualization.arrayToDataTable(analytics, true);

Laravel - Google line chart not displaying

1 Answers