apapazisis/laravel-echarts | LaravelPackages.net

Laravel Ajax Charts with WebWorker

What is Laravel Echarts?

Generate your Charts using Laravel Echarts PHP library. It supports the Echarts.js library. Charts are loaded through WebWorker in the background, independently of user-interface scripts and without affecting the performance of the page.

Documentation

Publish the files through

php artisan vendor:publish
Provider: Apapazisis\Echarts\EchartsServiceProvider

Add scripts in header

<script src="{{ asset('js/echarts.min.js') }}"></script> <!-- Download the Echarts library -->
<script src="{{ asset('vendor/charts/charts.js')}}"></script>

Routing

Route::get('/', function ()
{
   $testChart = new \App\Charts\TestChart();

   $testChart2 = new \App\Charts\Test2Chart();

   return view('welcome', compact('testChart', 'testChart2'));
});


Route::post('/data', function (\Illuminate\Http\Request $request)
{
   $class = 'App\\Charts\\' . $request->get('chartClass');
   $chart = (new $class)->make($request->except('chartClass'));

   return response()->json(
         $chart->get()
   );
});

Blade

 <body>
     <div class="flex-center position-ref full-height">
         <div class="content">
             {!! $testChart->render() !!}
             {!! $testChart2->render() !!}
             1o <input type="text" onchange="{{ $testChart->id }}CreateOrUpdateChart({'date': '2019-01-01'})">
             2o <input type="text" onchange="{{ $testChart2->id }}CreateOrUpdateChart()">
         </div>
     </div>
 </body>

TestChart Class

 namespace App\Charts;

 use Apapazisis\Echarts\Classes\BaseChart;
 use Carbon\Carbon;

 class TestChart extends BaseChart
 {
   public $id = 'kjdshksdjfsjdfg'; 

   protected $date = null; // it is used for filtering

   protected $data = [];

   public function __construct()
   {
       $this->setRoute(); // Set the route 
       parent::__construct();
   }

   public function make($filters = [])
   {
       return $this
           ->setFilters($filters) // first we set the filters and then we can use them wherever we want in other functions
           ->setData()
           ->setOptions()
           ->setDataset()
           ;
   }

   public function setData()
   {
       if (isset($this->date)){
           $i = 25;
       } else {
           $i = 10;
       }

       $this->data['mailsentdates'] = [$i, 20, 30];
       $this->data['accessclearingdate'] = [3, 6, 9];

       return $this;
   }

   public function setDataset()
   {
       $this->dataset('Sales1', 'bar', $this->data['mailsentdates'])->options([
           'itemStyle' => [
               'normal' => [
                   'color' => 'function (params){console.log(params);if (params.dataIndex > 0) return "red"; else return "green";}',
                   'barBorderColor' => 'gray',
                   'barBorderWidth' => 0,
                   'label' => [
                       'show' => true,
                       'position' => 'top',
                       'textStyle' => [
                           'fontWeight' => 500
                       ],
                       'color' => 'gray',
                       'formatter' => 'function(params){var array = ' . json_encode($this->data['mailsentdates']) . '; return params.data + array[params.dataIndex];}'

                   ]
               ]
           ]
       ]);

       $this->dataset('Sales2', 'bar', $this->data['accessclearingdate'])->options([
           'itemStyle' => [
               'normal' => [
                   'color' => 'function (params){console.log(window.' . $this->id . 'Options);if (params.dataIndex > 0) return "yellow"; else return "blue";}',
                   'barBorderColor' => 'gray',
                   'barBorderWidth' => 0,
                   'label' => [
                       'show' => true,
                       'position' => 'top',
                       'textStyle' => [
                           'fontWeight' => 500
                       ],
                       'color' => 'gray'
                   ]
               ]
           ]
       ]);

       return $this;
   }

   public function setOptions()
   {
       if (isset($this->date)) {
           $data = ['apos', 'xlbl2', 'xlbl3'];
        } else {
           $data = ['xlbl1', 'xlbl2', 'xlbl3'];
       }

       $this->options([
           'title' => [
               'text' => 'The title',
               'show' => true
           ],
           'tooltip' => [
               'trigger' => 'axis',
               'axisPointer' => [
                   'type' => 'cross'
               ]
           ],
           'toolbox' => [
                 'feature' => [
                     'saveAsImage' => [
                         'show' => true,
                         'title' => 'save as image',
                         'pixelRatio' => 2
                     ]
                 ]
           ],
           'animationEasing' => 'elasticOut',
           'legend' => [
               'data' => ['Sales1', 'Sales2']
           ],
           'xAxis' => [
               'type' => 'category',
               'data' => $data
           ],
           'yAxis' => [
               'type' => 'value'
           ],
           'grid' => [
               'left' => '0%',
               'right' => '0%',
               'bottom' => '0%',
               'containLabel' => true
           ]
       ]);

       return $this;
   }

   public function setRoute()
   {
       $this->route = url('data');

       return $this;
   }

   public function setFilters($filters)
   {
       $this->date = isset($filters['date']) ? Carbon::parse($filters['date'])->startOfWeek() : null;

       return $this;
   }
}