Laravel – Line Chart Example using Google Charts API

Laravel – Line Chart Example using Google Charts API

In this post we will give you information about Laravel – Line Chart Example using Google Charts API. Hear we will give you detail about Laravel – Line Chart Example using Google Charts APIAnd how to use it also give you demo for it if it is necessary.

In now-days, Google have several popular API like map, chart, analytics etc. Google charts JS API is also very popular and it is pretty simple to integrate with our application or projects. In this post, i going to give you example of Google line chart, How to user Google line chart in your laravel 5 application.

Google charts js provide several other charts like bar chart, Area chart, Column Chart, Pie Chart, GEO Chart etc. In this post we will use line chart with good graphical way. you can use in your laravel application, you just follow few step, after you can get output as bellow preview.

Preview:

Step 1: Add Table and Data

we require to create new table “visitor” that way we will get data from this table, you can use your own table but this is for example. we have to create migration for visitor table using Laravel 5 php artisan command, so first fire bellow command:

php artisan make:migration create_visitor_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create visitor table.

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;


class CreateVisitorTable extends Migration

{


public function up()

{

Schema::create('visitor', function (Blueprint $table) {

$table->increments('id');

$table->integer('click');

$table->integer('viewer');

$table->timestamps();

});

}


public function down()

{

Schema::drop("visitor");

}

}

Ok, now you can add few records like as bellow :

Step 2: Add Route

In this is step we need to add route for generate view. so open your app/Http/routes.php file and add following route.

Route::get('google-line-chart', 'HomeController@googleLineChart');


Step 3: Create Controller

If you haven’t HomeController then we should create new controller as HomeController in this path app/Http/Controllers/HomeController.php. Make sure you should have visitor table with some data. this controller will manage data and chart data and view file, so put bellow content in controller file:

app/Http/Controllers/HomeController.php

namespace AppHttpControllers;


use AppHttpRequests;

use IlluminateHttpRequest;

use DB;


class HomeController extends Controller

{


public function googleLineChart()

{

$visitor = DB::table('visitor')

->select(

DB::raw("year(created_at) as year"),

DB::raw("SUM(click) as total_click"),

DB::raw("SUM(viewer) as total_viewer"))

->orderBy("created_at")

->groupBy(DB::raw("year(created_at)"))

->get();


$result[] = ['Year','Click','Viewer'];

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

$result[++$key] = [$value->year, (int)$value->total_click, (int)$value->total_viewer];

}


return view('google-line-chart')

->with('visitor',json_encode($result));

}


}

Step 4: Create View File

In last step, we have to create view file “google-line-chart.blade.php” for generate view chart, so create google-line-chart file and put bellow code:

resources/view/google-line-chart.blade.php

<html>

<head>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">

var visitor = <?php echo $visitor; ?>;

console.log(visitor);

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

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable(visitor);

var options = {

title: 'Site Visitor Line Chart',

curveType: 'function',

legend: { position: 'bottom' }

};

var chart = new google.visualization.LineChart(document.getElementById('linechart'));

chart.draw(data, options);

}

</script>

</head>

<body>

<div id="linechart" style="width: 900px; height: 500px"></div>

</body>

</html>

Now you can run and check.

Hope this code and post will helped you for implement Laravel – Line Chart Example using Google Charts API. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

9  +  1  =  

We accept paid advance and paid guest Posting on our Site : Contact US