MorrisJS is a simple Javascript library used to draw simple beautiful charts. It is based on Raphael Javascript library.
A few time ago, I had written the first PHP version of this library. Now, I’m glad to release the Laravel service provider version of that library.
Requirements
- PHP 5.5.9 or greater
- Laravel 5.2 or greater
Installation
1 |
$ composer require gfazioli/laravel-morris-php |
Laravel
We include service providers and a facade for easy integration and a nice syntax for Laravel.
Firstly, add the gfazioli\Morris\MorrisServiceProvider
provider to the providers array in config/app.php
1 2 3 4 |
'providers' => [ ... gfazioli\Morris\MorrisServiceProvider::class, ], |
and then add the facade to your aliases
array
1 2 3 4 |
'aliases' => [ ... 'Morris' => gfazioli\Morris\Facades\MorrisFacade::class, ], |
HTML
Remember to include the following Javascript and styles before use Morris.
1 2 3 4 5 |
<!-- Morris --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> |
Examples
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="morris-area"></div> <?php echo Morris::area( 'morris-area' ) ->xkey( [ 'y' ] ) ->ykeys( [ 'a', 'b' ] ) ->labels( [ 'Series A', 'Series B' ] ) ->data( [ [ "y" => '2006', "a" => 100, "b" => 90 ], [ "y" => '2007', "a" => 75, "b" => 65 ], [ "y" => '2008', "a" => 50, "b" => 40 ], [ "y" => '2009', "a" => 75, "b" => 65 ], [ "y" => '2010', "a" => 50, "b" => 40 ], [ "y" => '2011', "a" => 75, "b" => 65 ], [ "y" => '2012', "a" => 100, "b" => 90 ] ] ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="morris-bar"></div> <?php echo Morris::bar( 'morris-bar' ) ->xkey( [ 'y' ] ) ->ykeys( [ 'a', 'b' ] ) ->labels( [ 'Series A', 'Series B' ] ) ->data( [ [ "y" => '2006', "a" => 100, "b" => 90 ], [ "y" => '2007', "a" => 75, "b" => 65 ], [ "y" => '2008', "a" => 50, "b" => 40 ], [ "y" => '2009', "a" => 75, "b" => 65 ], [ "y" => '2010', "a" => 50, "b" => 40 ], [ "y" => '2011', "a" => 75, "b" => 65 ], [ "y" => '2012', "a" => 100, "b" => 90 ] ] ); |
1 2 3 4 5 6 7 8 9 |
<div id="morris-donut"></div> <?php echo Morris::donut( 'morris-donut' ) ->data( [ [ "label" => "Download Sales", "value" => 12 ], [ "label" => "In-Store Sales", "value" => 30 ], [ "label" => "Mail-Order Sales", "value" => 20 ] ] ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="morris-line"></div> <?php echo Morris::line( 'morris-line' ) ->xkey( [ 'date' ] ) ->ykeys( [ 'value' ] ) ->labels( [ 'Money' ] ) ->data( [ [ 'date' => '2010', 'value' => 88 ], [ 'date' => '2011', 'value' => 18 ], [ 'date' => '2012', 'value' => 28 ], [ 'date' => '2013', 'value' => 48 ], ] ); |