Skip to content

Instantly share code, notes, and snippets.

@arcanoix
Forked from msurguy/Ajax-Instructions.md
Created September 30, 2017 11:50
Show Gist options
  • Save arcanoix/7baa915d28ae819855321bf40b68a4a8 to your computer and use it in GitHub Desktop.
Save arcanoix/7baa915d28ae819855321bf40b68a4a8 to your computer and use it in GitHub Desktop.
Morris bar charts with AJAX (Laravel)

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!

<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>
<?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;
}
}
Route::get('charts', 'ChartsController@getIndex');
Route::get('charts/api', 'ChartsController@getApi');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment