How to add charts in Laravel 5 using Chart JS ?

By Hardik Savani | April 22, 2016 | | 84077 Viewer | Category : Laravel Chart JS


Laravel 5's Blade template engine is awesome. you can easyly use PHP variable, js and js library in laravel view. i will create chart using Chart.js in laravel application. Chartjs is a js library, this library through we can use bar chart, line chart, area chart, column chart etc, C]chart.js also provide sevral theme 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 have to fetch data from database and then set in Chart JS function, In this post i will give you simple example to create bar chart using chart js that way you can use in your laravel application.

Preivew:

So, first 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 :

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






Do you want to expert php developer or developer team for your projects ?
Contact US
We are Recommending you: