In the dynamic world of web development, the power of data visualization is undeniable. As a developer, I've come to appreciate the art of turning raw data into insightful visuals that tell a story. Amidst the array of tools available, Google Charts emerges as a standout, offering a range of chart types that effortlessly transform data into meaningful displays.
In this article, I'm excited to share my journey of exploring data visualization through a hands-on example: incorporating a Google Line Chart into my Laravel 10 project.
As someone deeply involved with Laravel's evolution, I find Laravel 10 to be a pinnacle of functionality, enabling the creation of robust web applications.
By uniting the dynamic capabilities of Google Charts with Laravel 10's flexibility, I'm able to craft an interactive line chart that vividly captures trends, patterns, and data dynamics.
Whether you're an experienced Laravel developer like me, aiming to elevate your data presentation skills, or a newcomer eager to delve into the world of visualizing information, this guide is tailored for you.
I'll be your guide, leading you through every step — from the initial Laravel setup to seamlessly integrating a Google Line Chart into your application.
As we progress, you'll gain a strong grasp of how to seamlessly meld Google Charts with Laravel 10, empowering you to elegantly present data.
So, together, let's embark on this voyage into the realm of data visualization. By fusing Laravel 10 with Google Line Charts, we'll paint a visual narrative that brings your data to life in ways you've never imagined.
Begin by setting up a new Laravel project if you don't already have one. Open your terminal and execute the following command
composer create-project --prefer-dist laravel/laravel GoogleLineChartExample
We are getting dynamic data for the line chart example. So first, we need to create a migration for the "product" table using Laravel php artisan command.
php artisan make:migration create_products_table --create=products
After running this command you will find a php file in this location "database/migrations/" In this file you need to add the below code.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->integer('price')->nullable();
$table->integer('year')->nullable();
$table->string('product_type')->nullable();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('products');
}
}
After this, we need to run this migration by the following command in our terminal.
php artisan migrate
And after migration, you need to add some records as per the below screen print.
Create a new route and controller to handle your chart data. Open the routes/web.php file and add a route.
Route::get('linechart', 'LinechartController@linechart');
After adding the route we need to create a new controller and model for the Google line chart example. So, type the below command in your terminal to create the controller.
php artisan make:controller LinechartController
php artisan make:model Product
Now add the below code in your LinechartController.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Model\Product;
class LinechartController extends Controller
{
public function linechart(Request $request)
{
$phone_count_18 = Product::where('product_type','phone')->where('year','2018')->get()->count();
$phone_count_19 = Product::where('product_type','phone')->where('year','2019')->get()->count();
$phone_count_20 = Product::where('product_type','phone')->where('year','2020')->get()->count();
$laptop_count_18 = Product::where('product_type','laptop')->where('year','2018')->get()->count();
$laptop_count_19 = Product::where('product_type','laptop')->where('year','2019')->get()->count();
$laptop_count_20 = Product::where('product_type','laptop')->where('year','2020')->get()->count();
$tablet_count_18 = Product::where('product_type','tablet')->where('year','2018')->get()->count();
$tablet_count_19 = Product::where('product_type','tablet')->where('year','2019')->get()->count();
$tablet_count_20 = Product::where('product_type','tablet')->where('year','2020')->get()->count();
return view('linechart',compact('phone_count_18','phone_count_19','phone_count_20','laptop_count_18','laptop_count_19','laptop_count_20','tablet_count_18','tablet_count_19','tablet_count_20'));
}
}
Create a new blade view, e.g., linechart.blade.php, in the resources/views folder. Include the necessary HTML structure to render the Google Line Chart.
<html>
<head>
<title>Laravel 10 Google Line Chart Example - Vidvatek</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h2 style="margin:50px 0px 0px 0px;text-align: center;">Laravel 10 Google Line Chart Example - Vidvatek</h2>
<div id="linechart" style="width: 900px; height: 500px; margin-left: 235px"></div>
<script type="text/javascript">
var phone_count_18 = <?php echo $phone_count_18; ?>;
var phone_count_19 = <?php echo $phone_count_19; ?>;
var phone_count_20 = <?php echo $phone_count_20; ?>;
var laptop_count_18 = <?php echo $laptop_count_18; ?>;
var laptop_count_19 = <?php echo $laptop_count_19; ?>;
var laptop_count_20 = <?php echo $laptop_count_20; ?>;
var tablet_count_18 = <?php echo $tablet_count_18; ?>;
var tablet_count_19 = <?php echo $tablet_count_19; ?>;
var tablet_count_20 = <?php echo $tablet_count_20; ?>;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Phone', 'Laptop', 'Tablet'],
['2018', phone_count_18, laptop_count_18, tablet_count_18],
['2019', phone_count_19, laptop_count_19, tablet_count_19],
['2020', phone_count_20, laptop_count_20, tablet_count_20]
]);
var options = {
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('linechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Output:
You might also like:
- Read Also: How To Create Dynamic Bar Chart In Laravel 10
- Read Also: How To Integrate Paypal Payment Gateway In Laravel 10
- Read Also: Laravel 10 Import and Export CSV and Excel Files
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide