fredyounan
9/4/2014 - 9:34 AM

Follow this guide to integrate bar chart reports into your Laravel application. Reports like the following come with this guide:

Follow this guide to integrate bar chart reports into your Laravel application. Reports like the following come with this guide:

Instructions.md
content_copyfile_download
  • Rendered
  • Source

Follow this guide to integrate bar chart reports into your Laravel application. Reports like the following come with this guide:

  • Total number of Orders by day
  • Total number of Users subscribed by day
  • etc

The library used for the charts is: http://www.oesmith.co.uk/morris.js/

First put this into your page that will have the reports (in the Blade view) to include Morris library:

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

Then an example of the route/controller that will generate the report and display it to the user:

$days = Input::get('days', 7);

$range = \Carbon\Carbon::now()->subDays($days);

$stats = User::where('created_at', '>=', $range)
    ->groupBy('date')
    ->orderBy('date', 'DESC')
    ->remember(1440)
    ->get([
        DB::raw('Date(created_at) as date'),
        DB::raw('COUNT(*) as value')
    ])
    ->toJSON();

$this->layout->content = View::make('admin.stats.list', compact('stats'));

Now display this bar chart in your view:

<script>
    var data = JSON.parse('{{ $stats }}');
    
    new Morris.Bar({
        // ID of the element in which to draw the chart.
        element: 'stats-container',
        data: data,
        xkey: 'date',
        ykeys: ['value'],
        labels: ['Users']
    });
</script>

<ul class="nav nav-pills">
    <li class="{{ Input::get('days') == 7 || Input::get('days') == '' ? 'active' : ''}}"><a href="{{ url('stats?days=7') }}">7 Days</a></li>
    <li class="{{ Input::get('days') == 30 ? 'active' : ''}}"><a href="{{ url('stats?days=30') }}">30 Days</a></li>
    <li class="{{ Input::get('days') == 60 ? 'active' : ''}}"><a href="{{ url('stats?days=60') }}">60 Days</a></li>
    <li class="{{ Input::get('days') == 90 ? 'active' : ''}}"><a href="{{ url('stats?days=90') }}">90 Days</a></li>
</ul>
      
<div id="stats-container" style="height: 250px;"></div>

That's it! You now should have a nice bar chart of all users that registered in the past X number of days. It is trivial to change this to the number of orders. Just replace 'User' with another model such as "Order".
Enjoy!

EDIT: if you need this functionality with AJAX instead of page refresh, I got you covered: https://gist.github.com/msurguy/9984618