Legends for Line, Bar & Radar charts.

diff --git a/samples/bar.html b/samples/bar.html
index 1d085208e4ce4385f634d7651ec707bff55fedc6..eb8796ac5cb4d1e1f8760eeccbe0f78d0de5f39b 100644 (file)
--- a/samples/bar.html
+++ b/samples/bar.html
@@ -16,6 +16,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    <div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@@ -44,6 +50,13 @@
         }]
 
     };
+
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myBar.generateLegend());
+    }
+
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myBar = new Chart(ctx, {
@@ -53,6 +66,8 @@
                 responsive: true,
             }
         });
+
+        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -65,6 +80,7 @@
 
         });
         window.myBar.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -79,6 +95,7 @@
         }
 
         window.myBar.addDataset(newDataset, 1);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -88,11 +105,14 @@
             for (var index = 0; index < barChartData.datasets.length; ++index) {
                 window.myBar.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myBar.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -101,6 +121,7 @@
         barChartData.datasets.forEach(function(dataset, datasetIndex) {
             window.myBar.removeData(datasetIndex, -1);
         });
+        updateLegend();
     });
     </script>
 </body>

diff --git a/samples/line.html b/samples/line.html
index edcca91ecfade5b6e2cd61c3333914f8da949812..28171cdea7448682b5732dcc4e662373d2758d28 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -23,6 +23,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    <div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
@@ -74,8 +80,16 @@
     window.onload = function() {
         var ctx = document.getElementById("canvas").getContext("2d");
         window.myLine = new Chart(ctx, config);
+
+        updateLegend();
     };
 
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myLine.generateLegend());
+    }
+
     $('#randomizeData').click(function() {
         $.each(config.data.datasets, function(i, dataset) {
             dataset.data = dataset.data.map(function() {
@@ -85,6 +99,7 @@
         });
 
         window.myLine.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -103,6 +118,7 @@
         }
 
         window.myLine.addDataset(newDataset);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -112,11 +128,14 @@
             for (var index = 0; index < config.data.datasets.length; ++index) {
                 window.myLine.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myLine.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -125,6 +144,8 @@
         config.data.datasets.forEach(function(dataset, datasetIndex) {
             window.myLine.removeData(datasetIndex, -1);
         });
+
+        updateLegend();
     });
     </script>
 </body>

diff --git a/samples/radar.html b/samples/radar.html
index 0605c76e7608828efc773cc3a7203b68f7b825de..b84b8458369c9ac573491fc809c968fc7a85c1e8 100644 (file)
--- a/samples/radar.html
+++ b/samples/radar.html
@@ -16,6 +16,12 @@
     <button id="removeDataset">Remove Dataset</button>
     <button id="addData">Add Data</button>
     <button id="removeData">Remove Data</button>
+    ]<div>
+        <h3>Legend</h3>
+        <div id="legendContainer">
+            
+        </div>
+    </div>
     <script>
     var randomScalingFactor = function() {
         return Math.round(Math.random() * 100);
@@ -47,8 +53,15 @@
         }
     };
 
+    function updateLegend() {
+        $legendContainer = $('#legendContainer');
+        $legendContainer.empty();
+        $legendContainer.append(window.myRadar.generateLegend());
+    }
+
     window.onload = function() {
         window.myRadar = new Chart(document.getElementById("canvas"), config);
+        updateLegend();
     };
 
     $('#randomizeData').click(function() {
@@ -60,6 +73,7 @@
         });
 
         window.myRadar.update();
+        updateLegend();
     });
 
     $('#addDataset').click(function() {
@@ -78,6 +92,7 @@
         }
 
         window.myRadar.addDataset(newDataset);
+        updateLegend();
     });
 
     $('#addData').click(function() {
@@ -87,11 +102,14 @@
             for (var index = 0; index < config.data.datasets.length; ++index) {
                 window.myRadar.addData(randomScalingFactor(), index);
             }
+
+            updateLegend();
         }
     });
 
     $('#removeDataset').click(function() {
         window.myRadar.removeDataset(0);
+        updateLegend();
     });
 
     $('#removeData').click(function() {
@@ -100,6 +118,8 @@
         config.data.datasets.forEach(function(dataset, datasetIndex) {
             window.myRadar.removeData(datasetIndex, -1);
         });
+
+        updateLegend();
     });
     </script>
 </body>

diff --git a/src/charts/Chart.Scatter.js b/src/charts/Chart.Scatter.js
index 3c784ff3212ac023f6dbc94e95b22229c430242b..8863ed5e6ddbc7e5cab0cabe5513a372d76b45a3 100644 (file)
--- a/src/charts/Chart.Scatter.js
+++ b/src/charts/Chart.Scatter.js
@@ -23,9 +23,6 @@
                        }],
                },
 
-               //String - A legend template
-               legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].borderColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
-
                tooltips: {
                        template: "(<%= value.x %>, <%= value.y %>)",
                        multiTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%>(<%= value.x %>, <%= value.y %>)",

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index c7e29dcd3879af9a4f274f5124ca365d75536ce6..bd843631b03e1ea2dceeb2d3c082d16ea2a330f6 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -338,7 +338,7 @@
                },
 
                generateLegend: function generateLegend() {
-                       return template(this.options.legendTemplate, this);
+                       return helpers.template(this.options.legendTemplate, this);
                },
 
                destroy: function destroy() {

diff --git a/src/core/core.js b/src/core/core.js
index 85a99167148f8fab710fab4f2ad2e15a597afc26..42c214e1444a59b8acf1234aab20adfa92552132 100755 (executable)
--- a/src/core/core.js
+++ b/src/core/core.js
@@ -83,8 +83,10 @@
                        defaultColor: 'rgba(0,0,0,0.1)',
 
                        // Element defaults defined in element extensions
-                       elements: {}
+                       elements: {},
 
+                       // Legend template string
+                       legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i = 0; i < data.datasets.length; i++){%><li><span style=\"background-color:<%=data.datasets[i].backgroundColor%>\"><%if(data.datasets[i].label){%><%=data.datasets[i].label%><%}%></span></li><%}%></ul>",
                },
        };