Transcript
Laravel 5 Chart example using Charts Package laravelcode.com /post/laravel-5-chart-example-using-charts-package Today, we are share with you how to use chart in laravel application using consoletvs/charts package. this package is provide very easy functionality working withmany diffrent type chart. this package base on morris.js javascript library.In large application when you represent data in graphical way then chart is best solution for it. so you can easyly integrate chart in your laravel ppalication using consoletvs/charts .this package provide following diffrent type chart. 1. line chart2. area chart3. bar chart4. pie chart5. donut chart6. geo chart7. gauge chart8. temp chart9. percentage chart10. progressbar chart11. areaspline chart12. scatter chart After done this demo your output look like this Step : 1 Install Require Package We are first install consoletvs/charts chart package for integrate chart in laravelapplication using following command. 1/5 composer require consoletvs/charts Step : 2 Configure Package After install successfully package we are should be configure this package service provider and alias in config/app.php file. 'providers' => [ .... ConsoleTVs\Charts\ChartsServiceProvider::class,],'aliases' => [ .... 'Charts' => ConsoleTVs\Charts\Facades\Charts::class,], Done configuration then after publish vendor folders using following command php artisan vendor:publish After run this command you can see in config folder config/charts.php file automaticgenerated. and all default chart view file is generated in resources/views/vendor folder Step : 3 Add Dummy Records We are required some dummy data into the any table, which we are use in our chart. so weare add some drecords in user table using tinker . simply run following command php artisan tinker>>> factory(App\User::class, 20)->create(); Step : 4 Create Route Now add one route in your routes/web.php file. Route::get('bar-chart', 'ChartController@index'); Step : 5 Create Controller Now create ChartController.php file in app/Http/Controllers/ folders and put into itfolowing code 2/5 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')); }} Step : 6 Create View File Now we are create view file for display chart, so create chart.blade.php file in resources/views/ folder and put following code into it.First opeen your laravel resources/views/layouts/app.blade.php file and add onefollowing line into head ssection {!! Charts::styles() !!} @extends('layouts.app')@section('content')<div class= container > <div class= row > <div class= col-md-12 > <div class= panel panel-default > <div class= panel-heading >Chart Demo</div> <div class= panel-body > {!! $chart->html() !!} </div> </div> </div> </div></div>{!! Charts::scripts() !!}{!! $chart->script() !!}@endsection 3/5 Now we are ready to run our example so run bellow command ro quick run: php artisan serve Now you can open bellow URL on your browser: http://localhost:8000/bar-chart Another chart example and some configure code 1. Pie Chart Charts::create('pie', 'highcharts') ->title('My nice chart') ->labels(['First', 'Second', 'Third']) ->values([5,10,20]) ->dimensions(1000,500) ->responsive(false); 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 4/5
