How to add charts in Laravel 5 using Highcharts ?

By Hardik Savani | March 16, 2016 | | 24050 Viewer | Category : Laravel Highcharts


Share this post:

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 Highcharts in my laravel application. Highcharts is a js library, this library through we can use bar chart, line chart, area chart, column chart etc, Highcharts also provide sevral theme and graph that way you can use more chart from here : HighCharts Site.

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 Highcharts function, so let's see how to use Highcharts in larave with proper example.

Preivew:

So, first add bellow method like this way in your controller :

Controller Method

public function highchart()

{

$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('highchart')

->with('viewer',json_encode($viewer,JSON_NUMERIC_CHECK))

->with('click',json_encode($click,JSON_NUMERIC_CHECK));

}

And Put bellow code in highchart view file.

highchart.blade.php

@extends('layouts.app')

@section('content')

<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">

$(function () {

var data_click = <?php echo $click; ?>;

var data_viewer = <?php echo $viewer; ?>;

$('#container').highcharts({

chart: {

type: 'column'

},

title: {

text: 'Yearly Website Ratio'

},

xAxis: {

categories: ['2013','2014','2015', '2016']

},

yAxis: {

title: {

text: 'Rate'

}

},

series: [{

name: 'Click',

data: data_click

}, {

name: 'View',

data: data_viewer

}]

});

});

</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">

<div id="container"></div>

</div>

</div>

</div>

</div>

</div>

@endsection






We are Recommending you: