How to Implement Google Charts in Laravel 8?

Laravel 8

Nicesnippets

1728

10-10-2020


How to Implement Google Charts in Laravel 8?

Hi Guys,

In this example,I will learn you how to implement google chart in laravel 8.you can easy and simply implement in laravel 8.

Google provides the different types of charts such as Bar chart, Line chart, Area chart, Pie chart and many more. Today, I will try to implement some chart with the dynamic data which will be retrieved through the MySQL database. There are lots of differences in the chart. Some charts accept the JSON data, some chart accepts Array data.

Step 1: Install Laravel Project


First, you need to download the laravel fresh setup. Use this command then download laravel project setup :

composer create-project --prefer-dist laravel/laravel blog

Step 2: Setup Database

After successfully install laravel 8 Application, Go to your project .env file and set up database credential and move next step :

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name

DB_USERNAME=here database username

DB_PASSWORD=here database password

Step 3: Create Route:

first of all we will create simple route for creating simple chart. so let's add simple routes as like bellow:

routes/web.php

use App\Http\Controllers\PostController;

/*

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

|

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

|

*/

Route::get('/google-chart', [PostController::class, 'googleChart']);

Step 4: Create Controller:

Here, we will create new controller as PostController. so let's add bellow code on that controller file.

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Routing\Controller;

use Illuminate\Http\Request;

use App\Models\GoogleChart;

class PostController extends Controller

{

/**

* Display a listing of the resource.

*

* @return \Illuminate\Http\Response

*/

public function googleChart($value='')

{

$user = GoogleChart::get();

foreach ($user as $key => $value) {

$subjectData[] = [$value['subject'] , $value['point']];

}

return view('post.chart.google',compact('subjectData'));

}

}

Step 5: Create Blade File:

here, we need to create blade file and in this blade file we use google chart js and use their code.

resources/views/chart.blade.php

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://www.google.com/jsapi"></script>

<style>

.pie-chart {

width: 600px;

height: 400px;

margin: 0 auto;

}

.text-center{

text-align: center;

}

</style>

</head>

<body>

<h2 class="text-center">How to Implement Google Charts in Laravel 8?</h2>

<div id="chartDiv" class="pie-chart"></div>

<div class="text-center">

<h2>nicesnippets.com</h2>

</div>

<script type="text/javascript">

var subjectData = @json($subjectData);

window.onload = function() {

google.load("visualization", "1.1", {

packages: ["corechart"],

callback: 'drawChart'

});

};

function drawChart() {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Pizza');

data.addColumn('number', 'Populartiy');

data.addRows(subjectData);

var options = {

pieHole: 0.4,

title: 'Popularity of Types of Framework',

};

var chart = new google.visualization.PieChart(document.getElementById('chartDiv'));

chart.draw(data, options);

}

</script>

</body>

</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/google-chart

It will help you...


Recommended Posts