Brijpal Sharma
laravel
Publish on:-January 24th, 2019 ,
Category:- Web Development
Brijpal Sharma
laravel
Publish on:-January 24th, 2019 ,
Category:- Web Development
Today topic is how to use Charts In Laravel 5.7. In this application, we use Consoletvs/charts package. this package provides many types of graph. this package base on the morris.js javascript library. using this package we can create a line chart, geo chart, bar chart, pie chart, donut chart, line chart and area chart example in Laravel application. a big data or record always the best solution to represent into charts.
Create a new Laravel 5.7 application using the following command.
laravel new charts
After successfully creating a new project, now need to first install consoletvs/charts chart package for integrate chart in Laravel 5.7 application using the following command.
composer require "consoletvs/charts:5.*"
After install successfully consoletvs/charts package we are should configure this package service provider and alias in the config/app.php file.
'providers' => [
....
ConsoleTVs\Charts\ChartsServiceProvider::class,
],
'aliases' => [
....
'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
],
After adding the above code we need them to the public vender.
php artisan vendor:publish
After entering this command we need to choose providers. In my case, I choose 2 becouse charts providers indexed in 2. Enter 2 and enter.
Here we use fresh Laravel application so we need to add some data in the database so enter the following command to create a new migration table.
php artisan make:auth
After running this command we have migration file now, time to migrate table using this following command.
php aritsan migrate
After that, we need to add some dummy data so we are adding some records in user table using tinker. simply run following command.
php artisan tinker
>>> factory(App\User::class, 20)->create();
Route::get('chart', '[email protected]')
Create a new controller using this following command.
php artisan make:controller ChartContoller
And add the following command.
ChartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;
class ChartController extends Controller
{
//
public function index()
{
$users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))
->get();
$chart = Charts::database($users, 'bar', 'highcharts')
->title("Monthly new Register Users")
->elementLabel("Total Users")
->dimensions(1000, 500)
->responsive(false)
->groupByMonth(date('Y'), true);
return view('chart',compact('chart'));
}
}
create a chart.blade.php a view page and add some code.
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >Chart Demo</div>
<div >
{!! $chart->html() !!}
</div>
</div>
</div>
</div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}
@endsection
After that time to show our result in the browser.
visit //localhost:8000/chart
So, here is our result.
If we want another chart we can easily add to the Laravel application.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;
class ChartController extends Controller
{
//
public function index()
{
$users = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y'))
->get();
$chart = Charts::database($users, 'bar', 'highcharts')
->title("Monthly new Register Users")
->elementLabel("Total Users")
->dimensions(1000, 500)
->responsive(false)
->groupByMonth(date('Y'), true);
$pie = Charts::create('pie', 'highcharts')
->title('My nice chart')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
return view('chart',compact('chart','pie'));
}
}
In chart.blade.php
@extends('layouts.app')
@section('content')
<div >
<div >
<div >
<div >
<div >Chart Demo</div>
<div >
{!! $chart->html() !!}
</div>
<hr>
{!!$pie->html() !!}
</div>
</div>
</div>
</div>
{!! Charts::scripts() !!}
{!! $chart->script() !!}
{!! $pie->script() !!}
@endsection
Result
2. Donut / Doughnut Chart
Charts::create('donut', 'highcharts')
->title('My nice chart')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
3. Line Chart
Charts::create('line', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
4. Area Chart
Charts::create('area', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['First', 'Second', 'Third'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
5. Areaspline Chart
Charts::multi('areaspline', 'highcharts')
->title('My nice chart')
->colors(['#ff0000', '#ffffff'])
->labels(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday', 'Sunday'])
->dataset('John', [3, 4, 3, 5, 4, 10, 12])
->dataset('Jane', [1, 3, 4, 3, 3, 5, 4]);
6. Geo Chart
Charts::create('geo', 'highcharts')
->title('My nice chart')
->elementLabel('My nice label')
->labels(['ES', 'FR', 'RU'])
->colors(['#C5CAE9', '#283593'])
->values([5,10,20])
->dimensions(1000,500)
->responsive(false);
7. Percentage Chart
Charts::create('percentage', 'justgage')
->title('My nice chart')
->elementLabel('My nice label')
->values([65,0,100])
->responsive(false)
->height(300)
->width(0);
So, here we completed this post How to use Charts In Laravel 5.7 Using Charts Package.
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
Ceyda
Publish on:-June 18th, 2019
Hi, I am tring to make similar example. I wanted to sum of monthly price values from database with graph. It is showing graphs and months but it doesn't correct sum values. My part of Index controller values is below. Can you help me please? I will very appreciate you:)
$data = Billingtransactions::select(
\DB::raw('MONTH(created_at) as months'),
\DB::raw("Sum(price) as sums")
)
->groupBy('months')
->orderBy('months','asc')
->get();
$chart = Charts::database($data, 'bar', 'highcharts')
->title("Monthly Amount")
->elementLabel("Total Amount")
->dimensions(300, 500)
->responsive(false)
->groupBy('months');
eliran
Publish on:-April 27th, 2020
Hello. this tutorial very help me in 5.8 version, but now with 6.2 its doesn't working.
can you give a tutorial How to use Charts In Laravel 6.2 Using Charts Package?
Brijpal Sharma
Publish on:-April 29th, 2020
Sure, Eliran I will Make Tutorial for Laravel 6.2 or the latest version.
eliran
Publish on:-May 01st, 2020
Thanks very help, more another question:
I'm success to do type of bar charts graph according to my database (mysql), but another types like pie i can't. it's possible?
if yes i will glad to a example.
($pie_chart = Charts::database( $loans, 'pie', 'material')
->title('segmentation occuputioan')
->elementLabel("Total transactions by banks")
->Width(0)
->responsive(true)
->Colors(['#4caf50'])
->groupBy('name');
I get this error -> "Unknown chart library / type combination"
You must be logged in to post a comment.