Chartjs-How to use plugins in chartjs and laravel chart consoletvs/chartsjs

by

2👍

✅

Two things I have to clarify, after playing around with the library, I came up with the following results:

First: The function $chart->plugins is used to create inline plugins only, under chartjs/script.blade.php the file begins with:

chartjs script view

So for each plugin array that you define it will load a view from the pluginsView array that have the same name, but I think this is not full developed yet, and since this is not what the question is about lets move on.

Second: You can perfectly a nested option use options -> plugin like I have suggested before, but there’s one thing that you will have to be careful whit, is that ‘plugins’ can’t be an array like the others, and here is why:

library options function

The function expects a string to be printed raw, so with that you can use something like:

$chart->options([
    //...
    'plugins' => '{datalabels: {color: \'red\'}}',
    //...
]);

Which will work as expected:

final result

0👍

I share here the complete solution of my code and if you have any comments or suggestions, you will be welcome.

/* Controller */

<?php
namespace App\Http\Controllers\dashboard;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use ConsoleTVs\Charts\Classes\Chartjs\Chart;
use DB;
class DashBoardController extends Controller
{
  public function index() {
$result = DB::select('select 
                            convert(varchar(10),data_da_solicitacao,121) data,
                            convert(varchar(2),data_da_solicitacao,114) hora,
                            COUNT(id_controle_proposta_pac) qtdHora
                            from contact_std_parceiros_propostas (nolock) p
                            where convert(varchar(10),data_da_solicitacao,121) between convert(varchar(10),getdate(),121) and convert(varchar(10),getdate(),121) 
                            and not exists (select * from contact_std_parceiros_propostas_fora (nolock) f where f.id_controle_proposta_pac = p.id_controle_proposta_pac)
                            Group by convert(varchar(10),data_da_solicitacao,121), convert(varchar(2),data_da_solicitacao,114)
                            Order by 1');

    $arrHora = array();
    $arrQtdHora = array();
    $i = 0;
    foreach ( $result as $r )
    {
        $arrHora[$i] = $r->hora;
        $arrQtdHora[$i] = $r->qtdHora;
        $i++;
    }
        $chart = new Chart;
        $chart->labels($arrHora);
        $chart->dataset('Propostas Por Hora no dia de hoje','bar', $arrQtdHora)->backgroundColor('#64b5f6');
        $chart->options([
            'responsive' => true,
            'legend' => ['display' => true],
            'tooltips' => ['enabled'=>true],
            //'aspectRatio' => 1,
            'scales' => [
                'yAxes'=> [[
                            'display'=>false,
                            'ticks'=> ['beginAtZero'=> true],
                            'gridLines'=> ['display'=> false],
                          ]],
                'xAxes'=> [[
                            'categoryPercentage'=> 0.8,
                            //'barThickness' => 100,
                            'barPercentage' => 1,
                            'ticks' => ['beginAtZero' => true],
                            'gridLines' => ['display' => false],
                          ]],
            ],
            'plugins' => '{datalabels: {color: \'red\'}}',
        ]);
        return view('dashboard',compact('chart'));
    }
}

/* view */

@extends('layout.main')
@section('titulo','Pac - DashBoard')
@section('conteudo')
<div class="row">
    <div class="col s6 col m12 l12">
        <div class="x_panel">
            <div class="x_title">
                <div class="col s6 m6 l6"><h2>Propostas do dia</h2></div>
                <ul class="nav navbar-right panel_toolbox">
                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                    <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content" style="display: block;">
                <div class="row">
                    <div class="row top_tiles" id="card-0"></div>
                    <div class="row">
                        <div class="col s4 m7 l7">
                            <div id="graph-0" class="x_panel" style="height: 250px">   
                                <!--<canvas id="bar-0" style="width: 70% !important;height: auto !important;">-->
                                 {!! $chart->container() !!} 
                                @foreach($chart->plugins as $plugins)
                                        @include($chart->pluginsViews[$plugins])
                                  @endforeach 

                                <!--</canvas>-->
                            </div> 
                        </div> 
                        <div class="col s3 m5 l5">
                            <div id="graph-1" class="x_panel">
                                <canvas id="pie-1" style="width: 100% !important;height: auto !important;"></canvas>
                            </div> 
                        </div> 
                    </div> 
                </div>
            </div>
        </div>
    </div>
</div>
{!! $chart->script() !!}
@endsection

Leave a comment