How to Implement Chartjs in Laravel?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

In laravel 5.8 blade template engine is awesome. I can easily use js and js library in laravel application. Now here, i will Implement Chartjs in Laravel application. Chartjs is a js library, this library through we can make bar chart, line chart, area chart, column chart etc. Chartjs also provide several themes and graph that way you can use more chart from here :Chartjs Docs.

Whenever you need to add charts in laravel server side. Then you can easily use following example. You need to fetch data from your database table , and then set the data in ChartJS function. In this post I will give you simple example to Implement bar chart using chartjs in laravel that way you can use in your laravel project. 

Now, First need to add chartjs route in your routes.php file.

app/Http/routes.php

Route::get('chartjs', 'HomeController@chartjs');

Ok, now add bellow method like this way in Homecontroller file: HomeController Method

public function chartjs()
{
    $viewer = View::select(DB::raw("SUM(numberofview) as count"))
        ->orderBy("created_at")
        ->groupBy(DB::raw("year(created_at)"))
        ->get()->toArray();
    $viewer = array_column($viewer, 'count');
    
    $click = Click::select(DB::raw("SUM(numberofclick) as count"))
        ->orderBy("created_at")
        ->groupBy(DB::raw("year(created_at)"))
        ->get()->toArray();
    $click = array_column($click, 'count');
    
    return view('chartjs')
            ->with('viewer',json_encode($viewer,JSON_NUMERIC_CHECK))
            ->with('click',json_encode($click,JSON_NUMERIC_CHECK));
}

And Put bellow code in chartjs view file.

chartjs.blade.php

@extends('layouts.app')

@section('content')
<script src="https://raw.githubusercontent.com/nnnick/Chart.js/master/dist/Chart.bundle.js"></script>
<script>
    var year = ['2013','2014','2015', '2016'];
    var data_click = <?php echo $click; ?>;
    var data_viewer = <?php echo $viewer; ?>;

    var barChartData = {
        labels: year,
        datasets: [{
            label: 'Click',
            backgroundColor: "rgba(220,220,220,0.5)",
            data: data_click
        }, {
            label: 'View',
            backgroundColor: "rgba(151,187,205,0.5)",
            data: data_viewer
        }]
    };

    window.onload = function() {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 255, 0)',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                title: {
                    display: true,
                    text: 'Yearly Website Visitor'
                }
            }
        });

    };
</script>

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    <canvas id="canvas" height="280" width="600"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

Read Also : Vue JS Get Array Length Or Object Length

I hope it will help you. Also you can follow us on Facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →