Merge pull request #36 from alpo008/master

Changes to make posiible chart.js plugins usage
2amigos · May 2, 2018 · b144a4e · b144a4e
2 parents 0b31066 + b8dc8d2
commit b144a4e
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -86,6 +86,91 @@ use dosamigos\chartjs\ChartJs;
 ]);
 ?>
 ```
+Plugins usage example (displaying percentages on the Pie Chart):
+```
+echo ChartJs::widget([
+    'type' => 'pie',
+    'id' => 'structurePie',
+    'options' => [
+        'height' => 200,
+        'width' => 400,
+    ],
+    'data' => [
+        'radius' =>  "90%",
+        'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels
+        'datasets' => [
+            [
+                'data' => ['35.6', '17.5', '46.9'], // Your dataset
+                'label' => '',
+                'backgroundColor' => [
+                        '#ADC3FF',
+                        '#FF9A9A',
+                    'rgba(190, 124, 145, 0.8)'
+                ],
+                'borderColor' =>  [
+                        '#fff',
+                        '#fff',
+                        '#fff'
+                ],
+                'borderWidth' => 1,
+                'hoverBorderColor'=>["#999","#999","#999"],                
+            ]
+        ]
+    ],
+    'clientOptions' => [
+        'legend' => [
+            'display' => false,
+            'position' => 'bottom',
+            'labels' => [
+                'fontSize' => 14,
+                'fontColor' => "#425062",
+            ]
+        ],
+        'tooltips' => [
+            'enabled' => true,
+            'intersect' => true
+        ],
+        'hover' => [
+            'mode' => false
+        ],
+        'maintainAspectRatio' => false,
+
+    ],
+    'plugins' =>
+        new \yii\web\JsExpression('
+        [{
+            afterDatasetsDraw: function(chart, easing) {
+                var ctx = chart.ctx;
+                chart.data.datasets.forEach(function (dataset, i) {
+                    var meta = chart.getDatasetMeta(i);
+                    if (!meta.hidden) {
+                        meta.data.forEach(function(element, index) {
+                            // Draw the text in black, with the specified font
+                            ctx.fillStyle = 'rgb(0, 0, 0)';
+
+                            var fontSize = 16;
+                            var fontStyle = 'normal';
+                            var fontFamily = 'Helvetica';
+                            ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
+
+                            // Just naively convert to string for now
+                            var dataString = dataset.data[index].toString()+'%';
+
+                            // Make sure alignment settings are correct
+                            ctx.textAlign = 'center';
+                            ctx.textBaseline = 'middle';
+
+                            var padding = 5;
+                            var position = element.tooltipPosition();
+                            ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
+                        });
+                    }
+                });
+            }
+        }]')
+])
+```
+
 
 Further Information
 -------------------

diff --git a/src/ChartJs.php b/src/ChartJs.php
@@ -54,11 +54,18 @@ class ChartJs extends Widget
      *             shaped more like a doughnut than a pie!
      */
     public $type;
+    /**
+     * @var array the plugin objects allowing to assign custom callback functions to Chart events.
+     *            See [plugins & events documentation]
+     *            (http://www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api).
+     */
+    public $plugins = [];
 
     /**
      * Initializes the widget.
      * This method will register the bootstrap asset bundle. If you override this method,
      * make sure you call the parent implementation first.
+     * @throws InvalidConfigException
      */
     public function init()
     {
@@ -93,7 +100,8 @@ protected function registerClientScript()
             [
                 'type' => $this->type,
                 'data' => $this->data ?: new JsExpression('{}'),
-                'options' => $this->clientOptions ?: new JsExpression('{}')
+                'options' => $this->clientOptions ?: new JsExpression('{}'),
+                'plugins' => $this->plugins
             ]
         );