issue #4 finished: display chart legends enable and ready to use and customize

Author: fxcosta

src/ChartLine.php

@@ -35,6 +35,7 @@ public function render($canvas, array $data, array $options = null)
         $dataset    = [];
         $colours    = [];
         $labels     = [];
+        $legends    = [];
 
         // Datasets quantity
         foreach($data as $label => $info) {
@@ -48,13 +49,18 @@ public function render($canvas, array $data, array $options = null)
             $dataset[$i] = array_column($data, $i);
             $dataset[$i] = implode(", ", $dataset[$i]);
             $colours[$i] = $this->colours[$i];
+
+            if(isset($options['legends'])) {
+                $legends[$i] = $options['legends'][$i];
+            }
         }
 
         return view('chart-line::chart-line')
             ->with(['element'       => $canvas,
                     'dataset'       => $dataset,
                     'labels'        => $labels,
                     'colours'       => $colours,
+                    'legends'        => $legends,
                     'qtdDatasets'   => $datasetQnt
             ]);
 

src/ChartRadar.php

@@ -35,6 +35,7 @@ public function render($canvas, array $data, array $options = null)
         $dataset    = [];
         $colours    = [];
         $labels     = [];
+        $legends    = [];
 
         // Datasets quantity
         foreach($data as $label => $info) {
@@ -48,12 +49,17 @@ public function render($canvas, array $data, array $options = null)
             $dataset[$i] = array_column($data, $i);
             $dataset[$i] = implode(", ", $dataset[$i]);
             $colours[$i] = $this->colours[$i];
+
+            if(isset($options['legends'])) {
+                $legends[$i] = $options['legends'][$i];
+            }
         }
 
         return view('chart-radar::chart-radar')
             ->with(['element'       => $canvas,
                     'dataset'       => $dataset,
                     'labels'        => $labels,
+                    'legends'       => $legends,
                     'colours'       => $colours,
                     'qtdDatasets'   => $datasetQnt
             ]);

src/resources/views/chart-bar.blade.php

@@ -54,7 +54,7 @@
                     {
                         responsive:true
                     });
-                    document.getElementById('js-legend').innerHTML = myBar.generateLegend();
+                    document.getElementById('js-legend-bar').innerHTML = myBar.generateLegend();
                     // End options section
 
     });

src/resources/views/chart-line.blade.php

@@ -33,7 +33,7 @@
                                     echo '{';
                                 ?>
 
-                                    label: "Dados primários",
+                                    label: "<?php echo $legends[$i]; ?>",
                                     fillColor: "<?php echo $colours[$i]; ?>",
                                     strokeColor: "<?php echo $colours[$i]; ?>",
                                     pointColor: "<?php echo $colours[$i]; ?>",
@@ -58,6 +58,7 @@
 
                         responsive:true
                     });
+                    document.getElementById('js-legend-line').innerHTML = myLine.generateLegend();
                     // End options section
 
     });

src/resources/views/chart-pie-doughnut.blade.php

@@ -33,9 +33,9 @@
                 // Options section
                 // ---------------------------------------------------------------
                 {
-                    responsive:true
-                }
+                    responsive:true,
+                });
                 // End options section
-        );
+                document.getElementById('js-legend-pie').innerHTML = PizzaChart.generateLegend();
     });
 </script>

src/resources/views/chart-radar.blade.php

@@ -20,7 +20,7 @@
     addLoadEvent(function() {
         var <?php echo $element; ?> = document.getElementById("<?php echo $element; ?>").getContext("2d");
 
-        window.myBar = new Chart(<?php echo $element; ?>).Radar(
+        window.myRadar = new Chart(<?php echo $element; ?>).Radar(
                     // ---------------------------------------------------------------
                     // Data sections
                     // ---------------------------------------------------------------
@@ -34,7 +34,7 @@
                                     echo '{';
                                 ?>
 
-                                    label: "Dados primários",
+                                    label: "<?php echo $legends[$i]; ?>",
                                     fillColor: "<?php echo $colours[$i]; ?>",
                                     strokeColor: "<?php echo $colours[$i]; ?>",
                                     pointColor: "<?php echo $colours[$i]; ?>",
@@ -58,6 +58,7 @@
                     {
                         responsive:true
                     });
+                    document.getElementById('js-legend-radar').innerHTML = myRadar.generateLegend();
                     // End options section
 
     });