Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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');
@zenrhe

This comment has been minimized.

Copy link

@zenrhe zenrhe commented Feb 19, 2018

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

This link gets a 404. I believe the new link may be this: http://morrisjs.github.io/morris.js/

And thanks, this looks great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment