Morris bar charts with AJAX (Laravel)

Ajax-Instructions.md

Did I hear you wanted AJAX charts instead of hard coded? You got it.

Follow this guide to integrate bar chart reports into your Laravel application with AJAX. 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/

The source for a full route/controller/view is attached. Enjoy!

charts.blade.php

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <ul class="nav nav-pills ranges">
        <li><a href="#" data-range='7'>7 Days</a></li>
        <li><a href="#" data-range='30'>30 Days</a></li>
        <li><a href="#" data-range='60'>60 Days</a></li>
        <li><a href="#" data-range='90'>90 Days</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12"> 
      <div id="stats-container" style="height: 250px;"></div>
    </div>
  </div>
</div>

<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>

<script>
$(function() {

  // Create a function that will handle AJAX requests
  function requestData(days, chart){
    $.ajax({
      type: "GET",
      url: "{{url('admin/stats/api')}}", // This is the URL to the API
      data: { days: days }
    })
    .done(function( data ) {
      // When the response to the AJAX request comes back render the chart with new data
      chart.setData(JSON.parse(data));
    })
    .fail(function() {
      // If there is no communication between the server, show an error
      alert( "error occured" );
    });
  }

  var chart = Morris.Bar({
    // ID of the element in which to draw the chart.
    element: 'stats-container',
    // Set initial data (ideally you would provide an array of default data)
    data: [0,0],
    xkey: 'date',
    ykeys: ['value'],
    labels: ['Users']
  });

  // Request initial data for the past 7 days:
  requestData(7, chart);

  $('ul.ranges a').click(function(e){
    e.preventDefault();

    // Get the number of days from the data attribute
    var el = $(this);
    days = el.attr('data-range');

    // Request the data and render the chart using our handy function
    requestData(days, chart);

    // Make things pretty to show which button/tab the user clicked
    el.parent().addClass('active');
    el.parent().siblings().removeClass('active');
  })
});
</script>

ChartsController.php

<?php

class ChartsController extends BaseController {

  public function getIndex()
  {
    return View::make('charts');
  }

  public function getApi()
  {
    $days = Input::get('days', 7);

    $range = \Carbon\Carbon::now()->subDays($days);
    
    $stats = User::where('created_at', '>=', $range)
      ->groupBy('date')
      ->orderBy('date', 'DESC')
      ->remember(60)
      ->get([
        DB::raw('Date(created_at) as date'),
        DB::raw('COUNT(*) as value')
      ])
      ->toJSON();
    
    return $stats;
  }

}

routes.php

Route::get('charts', 'ChartsController@getIndex');
Route::get('charts/api', 'ChartsController@getApi');