Highcharts Chart using Laravel with Database

Highcharts Chart using Laravel with Database

In this Post We Will Explain About is Highcharts Chart using Laravel with Database With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5 Chart example using Highcharts Example

In this post we will show you Best way to implement HighChart Chart in Laravel 5.5 Example, hear for Simple Highcharts Chart Example using Laravel MySQLi Database with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Email sending with AngularJS and PHP Example




Laravel Controller Method

Lat’s start, first of all the add bellow some Laravel method like this best way in your Laravel simple controller :

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

And then Add bellow source code in highchart HTML 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 total_click = <?php echo $click; ?>;
        var total_users = <?php echo $totalusers; ?>;
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Yearly Live24u.com Ratio'
        },
        xAxis: {
            categories: ['2018','2019','2020', '2021']
        },
        yAxis: {
            title: {
                text: 'Rate'
            }
        },
        series: [{
            name: 'Click',
            data: total_click
        }, {
            name: 'View',
            data: total_users
        }]
    });
});
</script>
<h2>How to add charts in Laravel 5 using Highcharts Example</h2>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-success">
                <div class="panel-heading">Home</div>
                <div class="live24u panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   vuejs Tutorials - vuejs component





Example

I hope you have Got What is Laravel Highcharts – Display charts using the Highcharts API And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.