Google Pie Chart not show in Blade Laravel

174 Views Asked by At

I am trying to display the data with google pie chart. Everything works normally when running on localhost, but not in hosting. I've debugged and no errors were found. I am using Laravel 8.83.16

My Controller

public function index()
    {
        $dealers = Dealer::paginate(20);
        $count_dealers = DB::table('dealer_gesits')->count();

        $data_dealer = Dealer::select(
                DB::raw('province as province'),
                DB::raw('count(*) as number')
            )
            ->groupBy('province')
            ->get();
        $array[] = ['Province', 'Number'];
        foreach ($data_dealer as $key => $value) {
            $array[++$key] = [$value->province, $value->number];
        }

        if(request('search')){
            $dealers = Dealer::where('dealer_name', 'like', '%'.request('search').'%')
            ->orWhere('address', 'like', '%'.request('search').'%')->paginate(20);
        }

        $user       = Customer::latest()->get();

        // dd(json_encode($array));
        return view('dashboard.dealer.index', compact('dealers', 'count_dealers','user'))
            ->with('course', json_encode($array));
    }

My Blade View

<div class="card-body">
   <div id="pie_dealer" style="height: 300px;"></div>
</div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    var analytics = <?php echo $course; ?>

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

    function drawChart() {
        var data = google.visualization.arrayToDataTable(analytics);
        var options = {
            title: 'Presentase Persebaran',
            pieHole: 0.4,
            style: {
                font: 'bold 15px "Open Sans", sans-serif'
            }
        };
        var chart = new google.visualization.PieChart(document.getElementById('pie_dealer'));
        chart.draw(data, options);
    }
</script>

Showing in Localhost Pie chart showing in localhost

Not Showing in Hosting Pie chart not showing in hosting

Here my console All data has been received, but did not succeed in making a chart.

<script type="text/javascript">
    var analytics = [["Province","Number"],["Bali","4"],["Banten","1"],["DKI Jakarta","2"],["Jawa Barat","2"],["Jawa Tengah","2"],["Jawa Timur","11"],["Kalimantan Barat","1"],["Kalimantan Timur","2"],["Kalimantan Utara","1"],["Kepulauan Bangka Belitung","1"],["Maluku Utara","3"],["NTB","6"],["NTT","4"],["Papua","3"],["Riau","2"],["Sulawesi Tenggara","1"],["Yogyakarta","1"]]
    google.charts.load('current', {
        'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable(analytics);
        var options = {
            title: 'Presentase Persebaran Dealer GESITS di Indonesia',
            pieHole: 0.4,
            style: {
                font: 'bold 15px "Open Sans", sans-serif'
            }
        };
        var chart = new google.visualization.PieChart(document.getElementById('pie_dealer'));
        chart.draw(data, options);
    }
</script>

All data received, but not making chart

0

There are 0 best solutions below