Laravel Horizontal Bar Chart

The chart is really helpful for data visualization. In our application sometimes we need to show data horizontally with the horizontal bar chart. It's true, most of horizontal bar chart implementation is not quite simple and easy for beginner but in this tutorial, I'll show you the easiest horizontal bar chart with Laravel application. It's really simple and easy with hBarChart jQuery plugin. Even you don't need to make a JSON service to make a horizontal bar chart in your Laravel application.

Goal: Here I'll make a horizontal bar chart for last 7 days sales summary from the sales table. According to this tutorial, you can make any kind of horizontal data visualization like top 10 product sales depending on sales quantity, top 7 scorers or anything like that. Let's start.

Our sales table has this kind of data.

 id  trx_date  product_id    rate  quantity  amount  
------  --------  ----------  ------  --------  --------
     1  2019-11-18         1     200         1       200
     2  2019-11-18         2      50         2       100
     3  2019-11-19         2      50         4       200
     4  2019-11-20         1     200         1       200
     5  2019-11-20         3     150         2       300
     6  2019-11-21         4     500         2      1000
     7  2019-11-22         1     200         8      1600
     8  2019-11-23         4     500         8      4000
     9  2019-11-24         4     500        10      5000

We need to get summary data for the last 7 days. So we have to query like this.

SELECT trx_date,SUM(amount) total FROM sales GROUP BY trx_date ORDER BY trx_date DESC LIMIT 7

trx_date      total  
----------  ---------
2019-11-24    5000.00
2019-11-23    4000.00
2019-11-22    1600.00
2019-11-21    1000.00
2019-11-20     500.00
2019-11-19     200.00
2019-11-18     300.00

Contents

• Include jQuery
• Add hBarChart jQuery plugin
• Define Route
• Make Controller
• Make view
• Conclusion

Step 01: Include jQuery

At first, you need to add the jQuery library in your template. If you already have then you don't need to include jQuery.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Step 02: Add hBarChart jQuery plugin

Download the hBarChart.js and include it after the jQuery library.

<script src="hBarChart.js"></script>

Step 03: Define Route 

Route::get('/dashboard','DashboardController@index');

Step 04: Make Controller

Now make a dashboard controller for getting last 7 days sales summary data and pass these to a view.

php artisan make:controller DashboardController

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class DashboardController extends Controller
{

    public function index()
    {
        $data = \DB::select('SELECT trx_date,SUM(amount) total FROM sales GROUP BY trx_date ORDER BY trx_date DESC LIMIT 7');
        return view('admin.dashboard',compact('data'));
    }

}

Step 05: Make view

Make a blade view inside the resources folder name with dashboard.blade.php and write code for horizontal data visualization.

@extends('app')
@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-6">

                <ul class="chart">
	                @foreach($data as $row)
	                  <li data-data="{{$row->total}}">{{$row->trx_date}}</li>
	                @endforeach
                </ul>

            </div>
        </div>
    </div>

    <script>
        $(function () {
           $("ul.chart").hBarChart(); 
        })
    </script>

@endsection

In this view, I just printed my sales data with a simple foreach loop in my dashboard view with a specific format and then at the bottom of the view I just called the hBarChart function by selecting a CSS class .chart

You can configure this horizontal bar chart like max bar's colour, background colour, text colour, sorting and more by passing a config object into the hBarChart function.

$("ul.chart").hBarChart({
        bgColor: '#C000',
        textColor: '#fff',
        show: 'data',
        sorting: true,
        maxStyle: {
            bg: 'orange',
            text: 'white'
        }
});

Conclusion

Hope this tutorial post will help you to make horizontal bar chart in your Laravel application for data visualization easily. If you find this is helpful then please share this with others.