Friday, March 6, 2020

How to display data in Laravel using HighCharts?

      ,      No comments   
How to display data in Laravel using HighCharts?


Today I'm going to show you how to display data in Laravel using HighCharts. I will explain the example of Laravel using HighCharts step by step. You can easily use line charts, bar charts, pie charts, area charts, etc. We will create a line chart using Laravel 6.

Highcharts is a js library. From this library, bar charts, line charts, area charts, column charts, etc. can be used. Highcharts is an open source graphics library. Highcharts also offers various themes and graphics, so you can use more graphics here: MyitBuddies site.

If you need to add graphics on the Laravel 6 server side, you can easily use the following example. You should search for data from the database and then configure it in the highcharts function. So let's take a look at the example of how highcharts are used in Larave.

Step(1): Create Route:


First we create a simple route to create a simple line chart. So let's add simple routes like this:

routes/web.php 

Route::get('chart', 'ChartController@index');


Step(2): Create Controller:


Here we create a new controller like ChartController. So let's paste the following code into this driver file.

app/Http/Controllers/ChartController.php
<?php
  

namespace App\Http\Controllers;

  

use Illuminate\Http\Request;

use App\User;

  

class ChartController extends Controller

{

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    public function index()

    {

        $users = User::select(\DB::raw("COUNT(*) as count"))

                    ->whereYear('created_at', date('Y'))

                    ->groupBy(\DB::raw("Month(created_at)"))

                    ->pluck('count');

          

        return view('chart', compact('users'));

    }

}


Step(3): Create Blade File:


Here we have to create a blade file and in this blade file we use highchart JS and use their code.

resources/views/chart.blade.php 
<!DOCTYPE html>

<html>

<head>

    <title>How to display data in Laravel using HighCharts? - MyitBuddies.com</title>

</head>

   

<body>

<h1>How to display data in Laravel using HighCharts? -  MyitBuddies.com</h1>
<div id="container"></div>

</body>

  

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

<script type="text/javascript">

    var users =  <?php echo json_encode($users) ?>;

   

    Highcharts.chart('container', {

        title: {

            text: 'New User Growth, 2019'

        },

        subtitle: {

            text: 'Source: MyitBuddies.com.com'
        },

         xAxis: {

            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        },

        yAxis: {

            title: {

                text: 'Number of New Users'

            }

        },

        legend: {

            layout: 'vertical',

            align: 'right',

            verticalAlign: 'middle'

        },

        plotOptions: {

            series: {

                allowPointSelect: true

            }

        },

        series: [{

            name: 'New Users',

            data: users

        }],

        responsive: {

            rules: [{

                condition: {

                    maxWidth: 500

                },

                chartOptions: {

                    legend: {

                        layout: 'horizontal',

                        align: 'center',

                        verticalAlign: 'bottom'

                    }

                }

            }]

        }

});

</script>

</html>


Step(4): Create Dummy Records:


Here we have to add a few dummy records to the user table every month. You must create users with the creation date each month.

Ok, now you can run and review the chart.

I hope this tutorial how to display data in Laravel using HighCharts could help you ...



0 comments:

Post a Comment

Please don't enter any spam link in the comment box.