├── README.md
├── composer.json
└── src
    ├── Builder.php
    ├── Providers
        └── ChartjsServiceProvider.php
    └── resources
        └── views
            └── chart-template.blade.php


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x
  3 | 
  4 | # ⛔️ DEPRECATED
  5 | This repository is now deprecated. Use [@icehouse-ventures](https://github.com/icehouse-ventures/laravel-chartjs) instead for newer updates
  6 | 
  7 | *No Longer Maintained*. This lib is basically a bridge to Chartjs so it is very likely that some problem or issue is better resolved in the Chartjs repository itself.
  8 | 
  9 | Simple package to facilitate and automate the use of charts in Laravel 5.x
 10 | using the [Chart.js](http://www.chartjs.org/) v2 library from Nick Downie.
 11 | 
 12 | # Setup:
 13 | ```
 14 | composer require fx3costa/laravelchartjs
 15 | ```
 16 | 
 17 | And add the Service Provider in your file config/app.php:
 18 | ```php
 19 | Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class
 20 | ```
 21 | 
 22 | Finally, for now, you must install and add to your layouts / templates the Chartjs library that can be easily
 23 | found for download at: http://www.chartjs.org. This setting will also be improved.
 24 | 
 25 | # Usage:
 26 | 
 27 | You can request to Service Container the service responsible for building the charts
 28 | and passing through fluent interface the chart settings.
 29 | 
 30 | ```php
 31 | $service = app()->chartjs
 32 |     ->name()
 33 |     ->type()
 34 |     ->size()
 35 |     ->labels()
 36 |     ->datasets()
 37 |     ->options();
 38 | ```
 39 | 
 40 | For now the builder needs the name of the chart, the type of chart that can be anything that is supported by chartjs and the other custom configurations like labels, datasets, size and options.
 41 | 
 42 | In the dataset interface you can pass any configuration and option to your chart.
 43 | All options available in chartjs documentation are supported.
 44 | Just write the configuration with php array notations and its work!
 45 | 
 46 | # Advanced chartjs options
 47 | 
 48 | Since the current version allows it to add simple json string based options, it is not possible to generate options like:
 49 | 
 50 | ```php
 51 |     options: {
 52 |         scales: {
 53 |             xAxes: [{
 54 |                 type: 'time',
 55 |                 time: {
 56 |                     displayFormats: {
 57 |                         quarter: 'MMM YYYY'
 58 |                     }
 59 |                 }
 60 |             }]
 61 |         }
 62 |     }
 63 | ```
 64 | 
 65 | Using the method optionsRaw(string) its possible to add a the options in raw format:
 66 | 
 67 | Passing string format like a json
 68 | ```php
 69 |         $chart->optionsRaw("{
 70 |             legend: {
 71 |                 display:false
 72 |             },
 73 |             scales: {
 74 |                 xAxes: [{
 75 |                     gridLines: {
 76 |                         display:false
 77 |                     }  
 78 |                 }]
 79 |             }
 80 |         }");
 81 | ```
 82 | 
 83 | Or, if you prefer, you can pass a php array format
 84 | 
 85 | ```php
 86 | $chart->optionsRaw([
 87 |     'legend' => [
 88 |         'display' => true,
 89 |         'labels' => [
 90 |             'fontColor' => '#000'
 91 |         ]
 92 |     ],
 93 |     'scales' => [
 94 |         'xAxes' => [
 95 |             [
 96 |                 'stacked' => true,
 97 |                 'gridLines' => [
 98 |                     'display' => true
 99 |                 ]
100 |             ]
101 |         ]
102 |     ]
103 | ]);
104 | ```
105 | 
106 | 
107 | # Examples
108 | 
109 | 1 - Line Chart / Radar Chart:
110 | ```php
111 | // ExampleController.php
112 | 
113 | $chartjs = app()->chartjs
114 |         ->name('lineChartTest')
115 |         ->type('line')
116 |         ->size(['width' => 400, 'height' => 200])
117 |         ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
118 |         ->datasets([
119 |             [
120 |                 "label" => "My First dataset",
121 |                 'backgroundColor' => "rgba(38, 185, 154, 0.31)",
122 |                 'borderColor' => "rgba(38, 185, 154, 0.7)",
123 |                 "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
124 |                 "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
125 |                 "pointHoverBackgroundColor" => "#fff",
126 |                 "pointHoverBorderColor" => "rgba(220,220,220,1)",
127 |                 'data' => [65, 59, 80, 81, 56, 55, 40],
128 |             ],
129 |             [
130 |                 "label" => "My Second dataset",
131 |                 'backgroundColor' => "rgba(38, 185, 154, 0.31)",
132 |                 'borderColor' => "rgba(38, 185, 154, 0.7)",
133 |                 "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
134 |                 "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
135 |                 "pointHoverBackgroundColor" => "#fff",
136 |                 "pointHoverBorderColor" => "rgba(220,220,220,1)",
137 |                 'data' => [12, 33, 44, 44, 55, 23, 40],
138 |             ]
139 |         ])
140 |         ->options([]);
141 | 
142 | return view('example', compact('chartjs'));
143 | 
144 | 
145 |  // example.blade.php
146 | 
147 | <div style="width:75%;">
148 |     {!! $chartjs->render() !!}
149 | </div>
150 | ```
151 | 
152 | 
153 | 2 - Bar Chart:
154 | ```php
155 | // ExampleController.php
156 | 
157 | $chartjs = app()->chartjs
158 |          ->name('barChartTest')
159 |          ->type('bar')
160 |          ->size(['width' => 400, 'height' => 200])
161 |          ->labels(['Label x', 'Label y'])
162 |          ->datasets([
163 |              [
164 |                  "label" => "My First dataset",
165 |                  'backgroundColor' => ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
166 |                  'data' => [69, 59]
167 |              ],
168 |              [
169 |                  "label" => "My First dataset",
170 |                  'backgroundColor' => ['rgba(255, 99, 132, 0.3)', 'rgba(54, 162, 235, 0.3)'],
171 |                  'data' => [65, 12]
172 |              ]
173 |          ])
174 |          ->options([]);
175 | 
176 | return view('example', compact('chartjs'));
177 | 
178 | 
179 |  // example.blade.php
180 | 
181 | <div style="width:75%;">
182 |     {!! $chartjs->render() !!}
183 | </div>
184 | ```
185 | 
186 | 
187 | 3 - Pie Chart / Doughnut Chart:
188 | ```php
189 | // ExampleController.php
190 | 
191 | $chartjs = app()->chartjs
192 |         ->name('pieChartTest')
193 |         ->type('pie')
194 |         ->size(['width' => 400, 'height' => 200])
195 |         ->labels(['Label x', 'Label y'])
196 |         ->datasets([
197 |             [
198 |                 'backgroundColor' => ['#FF6384', '#36A2EB'],
199 |                 'hoverBackgroundColor' => ['#FF6384', '#36A2EB'],
200 |                 'data' => [69, 59]
201 |             ]
202 |         ])
203 |         ->options([]);
204 | 
205 | return view('example', compact('chartjs'));
206 | 
207 | 
208 |  // example.blade.php
209 | 
210 | <div style="width:75%;">
211 |     {!! $chartjs->render() !!}
212 | </div>
213 | ```
214 | 
215 | 
216 | # OBS:
217 | 
218 | This README, as well as the package, is in development, but will be constantly updated and I will keep you informed as soon as
219 | it is ready for production. Thank you for understanding.
220 | 
221 | Any questions or suggestions preferably open a issue!
222 | 
223 | # License
224 | LaravelChartJs is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).
225 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "fx3costa/laravelchartjs",
 3 |     "description": "Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library",
 4 |     "keywords": [
 5 |       "chartjs","laravel5","chart","reports","graphics", "fx3costa"
 6 |     ],
 7 |     "license": "MIT",
 8 |     "authors": [
 9 |         {
10 |             "name": "Felix",
11 |             "email": "fx3costa@gmail.com"
12 |         }
13 |     ],
14 |     "require": {
15 |       "php": ">=5.6.4",
16 |       "illuminate/support": "^5.1|^6.0|^7.0|^8.0|^9.0|^10.0"
17 |     },
18 | 
19 |     "autoload": {
20 |       "psr-4": {
21 |         "Fx3costa\\LaravelChartJs\\" : "src/"
22 |       }
23 |     },
24 |     
25 |     "extra": {
26 |         "laravel": {
27 |             "providers": [
28 |                 "Fx3costa\\LaravelChartJs\\Providers\\ChartjsServiceProvider"
29 |             ]
30 |         }
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/Builder.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /*
  4 |  * This file is inspired by Builder from Laravel ChartJS - Brian Faust
  5 |  */
  6 | 
  7 | namespace Fx3costa\LaravelChartJs;
  8 | 
  9 | use Illuminate\Support\Arr;
 10 | 
 11 | class Builder
 12 | {
 13 |     /**
 14 |      * @var array
 15 |      */
 16 |     private $charts = [];
 17 | 
 18 |     /**
 19 |      * @var string
 20 |      */
 21 |     private $name;
 22 | 
 23 |     /**
 24 |      * @var array
 25 |      */
 26 |     private $defaults = [
 27 |         'datasets' => [],
 28 |         'labels'   => [],
 29 |         'type'     => 'line',
 30 |         'options'  => [],
 31 |         'size'     => ['width' => null, 'height' => null]
 32 |     ];
 33 | 
 34 |     /**
 35 |      * @var array
 36 |      */
 37 |     private $types = [
 38 |         'bar',
 39 |         'horizontalBar',
 40 |         'bubble',
 41 |         'scatter',
 42 |         'doughnut',
 43 |         'line',
 44 |         'pie',
 45 |         'polarArea',
 46 |         'radar'
 47 |     ];
 48 | 
 49 |     /**
 50 |      * @param $name
 51 |      *
 52 |      * @return $this|Builder
 53 |      */
 54 |     public function name($name)
 55 |     {
 56 |         $this->name          = $name;
 57 |         $this->charts[$name] = $this->defaults;
 58 |         return $this;
 59 |     }
 60 | 
 61 |     /**
 62 |      * @param $element
 63 |      *
 64 |      * @return Builder
 65 |      */
 66 |     public function element($element)
 67 |     {
 68 |         return $this->set('element', $element);
 69 |     }
 70 | 
 71 |     /**
 72 |      * @param array $labels
 73 |      *
 74 |      * @return Builder
 75 |      */
 76 |     public function labels(array $labels)
 77 |     {
 78 |         return $this->set('labels', $labels);
 79 |     }
 80 | 
 81 |     /**
 82 |      * @param array $datasets
 83 |      *
 84 |      * @return Builder
 85 |      */
 86 |     public function datasets(array $datasets)
 87 |     {
 88 |         return $this->set('datasets', $datasets);
 89 |     }
 90 | 
 91 |     /**
 92 |      * @param $type
 93 |      *
 94 |      * @return Builder
 95 |      */
 96 |     public function type($type)
 97 |     {
 98 |         if (!in_array($type, $this->types)) {
 99 |             throw new \InvalidArgumentException('Invalid Chart type.');
100 |         }
101 |         return $this->set('type', $type);
102 |     }
103 | 
104 |     /**
105 |      * @param array $size
106 |      *
107 |      * @return Builder
108 |      */
109 |     public function size($size)
110 |     {
111 |         return $this->set('size', $size);
112 |     }
113 | 
114 |     /**
115 |      * @param array $options
116 |      *
117 |      * @return $this|Builder
118 |      */
119 |     public function options(array $options)
120 |     {
121 |         foreach ($options as $key => $value) {
122 |             $this->set('options.' . $key, $value);
123 |         }
124 | 
125 |         return $this;
126 |     }
127 | 
128 |     /**
129 |      *
130 |      * @param string|array $optionsRaw
131 |      * @return \self
132 |      */
133 |     public function optionsRaw($optionsRaw)
134 |     {
135 |         if (is_array($optionsRaw)) {
136 |             $this->set('optionsRaw', json_encode($optionsRaw, true));
137 |             return $this;
138 |         }
139 | 
140 |         $this->set('optionsRaw', $optionsRaw);
141 |         return $this;
142 |     }
143 | 
144 |     /**
145 |      * @return mixed
146 |      */
147 |     public function render()
148 |     {
149 |         $chart = $this->charts[$this->name];
150 | 
151 |         return view('chart-template::chart-template')
152 |                 ->with('datasets', $chart['datasets'])
153 |                 ->with('element', $this->name)
154 |                 ->with('labels', $chart['labels'])
155 |                 ->with('options', isset($chart['options']) ? $chart['options'] : '')
156 |                 ->with('optionsRaw', isset($chart['optionsRaw']) ? $chart['optionsRaw'] : '')
157 |                 ->with('type', $chart['type'])
158 |                 ->with('size', $chart['size']);
159 |     }
160 | 
161 |     /**
162 |      * @param $key
163 |      *
164 |      * @return mixed
165 |      */
166 |     private function get($key)
167 |     {
168 |         return Arr::get($this->charts[$this->name], $key);
169 |     }
170 | 
171 |     /**
172 |      * @param $key
173 |      * @param $value
174 |      *
175 |      * @return $this|Builder
176 |      */
177 |     private function set($key, $value)
178 |     {
179 |         Arr::set($this->charts[$this->name], $key, $value);
180 | 
181 |         return $this;
182 |     }
183 | }
184 | 


--------------------------------------------------------------------------------
/src/Providers/ChartjsServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php namespace Fx3costa\LaravelChartJs\Providers;
 2 | 
 3 | use Fx3costa\LaravelChartJs\Builder;
 4 | use Fx3costa\LaravelChartJs\ChartBar;
 5 | use Fx3costa\LaravelChartJs\ChartLine;
 6 | use Fx3costa\LaravelChartJs\ChartPieAndDoughnut;
 7 | use Fx3costa\LaravelChartJs\ChartRadar;
 8 | use Illuminate\Support\ServiceProvider;
 9 | 
10 | class ChartjsServiceProvider extends ServiceProvider
11 | {
12 | 
13 |     /**
14 |      * Array with colours configuration of the chartjs config file
15 |      * @var array
16 |      */
17 |     protected $colours = [];
18 | 
19 |     public function boot()
20 |     {
21 |         $this->loadViewsFrom(__DIR__.'/../resources/views', 'chart-template');
22 |         $this->colours = config('chartjs.colours');
23 |     }
24 | 
25 | 
26 |     /**
27 |      * Register the service provider.
28 |      *
29 |      * @return void
30 |      */
31 |     public function register()
32 |     {
33 |         $this->app->bind('chartjs', function() {
34 |             return new Builder();
35 |         });
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/resources/views/chart-template.blade.php:
--------------------------------------------------------------------------------
 1 | <canvas id="{!! $element !!}" width="{!! $size['width'] !!}" height="{!! $size['height'] !!}">
 2 | <script>
 3 |     document.addEventListener("DOMContentLoaded", function(event) {
 4 |         (function() {
 5 |     		"use strict";
 6 |             var ctx = document.getElementById("{!! $element !!}");
 7 |             window.{!! $element !!} = new Chart(ctx, {
 8 |                 type: '{!! $type !!}',
 9 |                 data: {
10 |                     labels: {!! json_encode($labels) !!},
11 |                     datasets: {!! json_encode($datasets) !!}
12 |                 },
13 |                 @if(!empty($optionsRaw))
14 |                     options: {!! $optionsRaw !!}
15 |                 @elseif(!empty($options))
16 |                     options: {!! json_encode($options) !!}
17 |                 @endif
18 |             });
19 |         })();
20 |     });
21 | </script>
22 | </canvas>
23 | 


--------------------------------------------------------------------------------