How to add charts in Laravel using Highcharts ?

How to add charts in Laravel using Highcharts ?

In this post we will give you information about How to add charts in Laravel using Highcharts ?. Hear we will give you detail about How to add charts in Laravel using Highcharts ?And how to use it also give you demo for it if it is necessary.

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


Also see:Laravel – GEO Chart Example using lavacharts

@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 >

<div >

<div >

<div >

<div >Dashboard</div>

<div >

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

</div>

</div>

</div>

</div>

</div>

@endsection

Hope this code and post will helped you for implement How to add charts in Laravel using Highcharts ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

8  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US