How to use Ajax ConsoleTvs Charts In Laravel 6

Let's start How to use Ajax ConsoleTvs Charts In Laravel 6.If you need to add some graphics to your project, I will help you add Ajax graphics with Laravel 6 using the Consoletvs / Charts package. Here I will give you an example of how to create an Ajax diagram with consoles / diagrams in the Laravel 6 application. Consoles / charts offer high charts, diagrams, fusion charts, echarts, frappe and c3-Ajax charts with Laravel 6.

I will give you a simple Ajax diagram with Consoletvs / diagrams in Laravel 6 step by step. Consoletvs / diagrams offer a possibility to draw a diagram with the Ajax method. It is possible that at some point we will have to change the chart in the selected year or value. At this point, it is not a good idea to refresh the page and display a new diagram. You have to do this with jquery ajax. With the Ajax method, you can easily create a simple graphic without reloading the page.

So let's follow the tutorial  that How to use Ajax ConsoleTvs Charts In Laravel 6 below and you will get a simple Ajax graphic with Laravel 6. You can also see a demo screenshot that you can understand:

Step 1 : Install Laravel 6

First of all, we have to get a new application of the Laravel 6 version with the following command because we are working from scratch. So open Terminal O at the command prompt and run the following command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install consoletvs/charts Package

In this step we have to install consoletvs / chart via the Composer package manager, hence the terminal and the following fire command:

composer require consoletvs/charts

Step 3: Create Route

In this step we need to create routes for the display view and the Ajax method. Open your "route / web.php" file and add the following route.

routes/web.php

Route::get('chart-line', 'ChartController@chartLine');

Route::get('chart-line-ajax', 'ChartController@chartLineAjax');

Step 4: create a chart class

Here we need to create a chart class using the consoletvs / chart command. So let's create it like this:

php artisan make:chart UserLineChart Chartjs

Now you can see that there is a UserLineChart.php file like this:

app/Charts/UserLineChart.php

<?php

  

namespace App\Charts;

  

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

  

class UserLineChart extends Chart

{

    /**

     * Initializes the chart.

     *

     * @return void

     */

    public function __construct()

    {

        parent::__construct();

    }

}

Step 5: create drivers:

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;

use App\Charts\UserLineChart;

   

class ChartController extends Controller

{

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    public function chartLine()

    {

        $api = url('/chart-line-ajax');

   

        $chart = new UserLineChart;

        $chart->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])->load($api);

          

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

    }

   

    /**

     * The attributes that are mass assignable.

     *

     * @var array

     */

    public function chartLineAjax(Request $request)

    {

        $year = $request->has('year') ? $request->year : date('Y');

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

                    ->whereYear('created_at', $year)

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

                    ->pluck('count');

  

        $chart = new UserLineChart;

  

        $chart->dataset('New User Register Chart', 'line', $users)->options([

                    'fill' => 'true',

                    'borderColor' => '#51C1C0'

                ]);

  

        return $chart->api();

    }

}

Step 6: Create Blade File:

Here we have to create a blade file and in this blade file we use the js graphic and its code.

resources/views/chartLine.blade.php

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>How to use Ajax ConsoleTvs Charts In Laravel 6 - Myitbuddies.com</title>

    </head>

    <body>

  

        <h1>How to use Ajax ConsoleTvs Charts In Laravel 6 - Myitbuddies.com</h1>

  

        <select class="sel" name="year">

            <option value="2019">Year 2019</option>

            <option value="2018">Year 2018</option>

            <option value="2017">Year 2017</option>

        </select>

  

        <div style="width: 80%;margin: 0 auto;">

            {!! $chart->container() !!}

        </div>

          

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" ></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>

  

        {!! $chart->script() !!}

  

        <script type="text/javascript">

            var original_api_url = {{ $chart->id }}_api_url;

            $(".sel").change(function(){

                var year = $(this).val();

                {{ $chart->id }}_refresh(original_api_url + "?year="+year);

            });

        </script>

    </body>

</html>

Step 7: Create Dummy Records:

Here we need to add some dummy records to the user table every month and add data for two years. You must create users each month with the creation date.

Ok, now you can run and review the chart.

I hope this tutorials Ajax ConsoleTvs Charts in Laravel could help you ...

Thanks.