Laravel 5.6 Bar,pie,line,donut,area,geo charts and graphs

Laravel 5.6 Bar,pie,line,donut,area,geo charts and graphs

In this Post We Will Explain About is Laravel 5.6 Bar,pie,line,donut,area,geo charts and graphs With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5.6 Chart example using Charts Package Example

In this post we will show you Best way to implement Laravel 5.6 – Generate Free Charts and Graphs Example, hear for How To Generate Charts in Laravel 5.6 using ChartJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1: Install ConsoleTVs Package

here simple step by step first of all I will install Laravel package Like as ConsoleTVs/Charts simple Laravel composer package by following CMD to run composer main command in your web project laravel 5.6 web-application.

composer require consoletvs/charts

And then successfully all the libs install package, so second one open this path Like as config/app.php file as well as insert Laravel service provider and include Laravel alias.

Also Read :   PHP Registration Form With Validation using Jquery MySQL Source code

config/app.php

//Laravel 5.6 - Generate Free Charts and Graphs Example
'providers' => [
.... //some Laravel providers
ConsoleTVs\Charts\ChartsServiceProvider::class,
],
'aliases' => [
.... //some Laravel aliases
'Charts' => ConsoleTVs\Charts\Facades\Charts::class,
]

Phase 2: Make Students Dummy Records

you have more students table by executing default Laravel Database migrations of latest version of the laravel. Therefor I have to create dummy more records for sample apps or demo in students table. Therefor let’s execute bellow Laravel some command as well as fetch dummy records.

php artisan tinker

>>> factory(App\User::class, 25)->create();

Phase 3: Add Routes

And then I will put Laravel routes for sample example, Therefor simply Put following Laravel 5.6 route in your web.php route file:

routes/web.php

//How to create charts using Laravel in your web application
Route::get('live24u-chart/{type}','liveChartGraphsController@livecreateChart');

Phase 4: Add New Controller

In this Phase,I need to make new Laravel controller Like as a liveChartGraphsController that will all the data model and view manage index method of Laravel route. Therefor let’s Insert bellow some source code.

Also Read :   Convert Array to XML and XML to Array using PHP

app/Http/Controllers/liveChartGraphsController.php

In this example available to Laravel 5.6 Bar,pie,line,donut,area,geo charts and graphs

<?php
//highcharts in laravel 5.6
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Charts;
use App\User;
use DB;
//highcharts in laravel 5.6 Example
class liveChartGraphsController extends Controller
{

    public function livecreateChart($type)
    {
        switch ($type) {
            case 'bar':
                $students = User::where(DB::raw("(DATE_FORMAT(created_at,'%Y'))"),date('Y')) 
                        ->get();
                $chart = Charts::database($students, 'bar', 'highcharts') 
                            ->title("Monthly create new Register Students") 
                            ->elementLabel("Total Students") 
                            ->dimensions(900, 450) 
                            ->responsive(true) 
                            ->groupByMonth(date('Y'), true);
                break;
            case 'pie':
                $chart = Charts::create('pie', 'highcharts')
                            ->title('Live24u.com Laravel Pie Chart')
                            ->labels(['Codeigniter', 'Laravel', 'PHP'])
                            ->values([5,15,25])
                            ->dimensions(900,450)
                            ->responsive(true);
                break;
            case 'donut':
                $chart = Charts::create('donut', 'highcharts')
                            ->title('Live24u.com Laravel Donut Chart')
                            ->labels(['starter', 'silver', 'Golden'])
                            ->values([5,15,25])
                            ->dimensions(900,450)
                            ->responsive(true);
                break;
            case 'line':
                $chart = Charts::create('line', 'highcharts')
                            ->title('Live24u.com Laravel Line Chart')
                            ->elementLabel('Live24u.com Laravel Line Chart Lable')
                            ->labels(['starter', 'silver', 'Golden'])
                            ->values([5,15,25])
                            ->dimensions(900,450)
                            ->responsive(true);
                break;
            case 'area':
                $chart = Charts::create('area', 'highcharts')
                            ->title('Live24u.com Laravel Area Chart')
                            ->elementLabel('Live24u.com Laravel Line Chart label')
                            ->labels(['starter', 'silver', 'Golden'])
                            ->values([5,15,25])
                            ->dimensions(900,450)
                            ->responsive(true);
                break;
            case 'geo':
                $chart = Charts::create('geo', 'highcharts')
                            ->title('Live24u.com Laravel GEO Chart')
                            ->elementLabel('Live24u.com Laravel GEO Chart label')
                            ->labels(['jd', 'ak', 'ks'])
                            ->colors(['#c60000', '#cc33cc'])
                            ->values([5,15,25])
                            ->dimensions(900,450)
                            ->responsive(true);
                break;
            default:
                # code...
                break;
        }
        return view('chart', compact('chart'));
    }
}

Phase 5: Make Blade File

Lastly I need to make Lable blade file Like name as a livechart.blade.php, will include bootstrap HTML layout. Therefor let’s Pit bellow some source code:

Also Read :   Vuejs Expressions – Numbers Strings Objects Array eval using Vuejs

resources/views/livechart.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Live Charts - Live24u.com free download source code here</title>
        {!! Charts::styles() !!}
    </head>
    <body>
   
        <div class="app">
            <center>
                {!! $chart->html() !!}
            </center>
        </div>

        {!! Charts::scripts() !!}
        {!! $chart->script() !!}
    </body>
</html>

Good Luck, finally I am ready to execute this Project. Therefor you can run simple Laravel Project as well as check on simple localhost following path:

http://localhost:8000/live24u-chart/bar
http://localhost:8000/live24u-chart/pie
http://localhost:8000/live24u-chart/donut
http://localhost:8000/live24u-chart/line
http://localhost:8000/live24u-chart/area
http://localhost:8000/live24u-chart/geo

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Laravel 5.6 Chart example using Charts Package And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.