Chartjs Bar Chart Legend

Question

I am having problems getting a legend to show up on the bar graph that I have created using chartjs. The documentation talks about a legend template, but I can't seem to find a good example of how to implement this into the graph. Below is the code I am using to generate the graph.

<div style="width: 100%;">
  <canvas id="canvas" height="450" width="600"></canvas>
<div id="legendDiv">&nbsp;</div>
</div>
<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

    var barChartData = {
        labels : ["Item 1","Item 2","Item 3","Item 4","Item 5","Item 6","Item 7","Item 8","Item 9","Item 10","Item 11","Item 12","Item 13","Item 14","Item 15","Item 16","Item 17"]
        datasets : [
            {
                fillColor : "rgba(166,166,166,0.5)",
                strokeColor : "rgba(166,166,166,0.8)",
                highlightFill: "rgba(166,166,166,0.75)",
                highlightStroke: "rgba(166,166,166,1)",
                data : [10,4,3,4,3,6,4,1,10,3,3,10,2,4,10,3,4]

             },
            {
                fillColor : "rgba(196,64,54,0.5)",
                strokeColor : "rgba(196,64,54,0.8)",
                highlightFill : "rgba(196,64,54,0.75)",
                highlightStroke : "rgba(196,64,54,1)",
                data : [6,3,2,3,2,3,4,1,8,3,3,6,1,3,8,3,4]
            }
        ]

    }
    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
         });
     }

     </script>
 <div>

Answer 1

THE BELOW ANSWER IS FOR CHARTJS 1.X

So below is an example of how you can set up a legend using the labels that need to be given which each dataset, using the default legend template all you have to do is call generateLegend() on the chart and then place this on the page

var helpers = Chart.helpers;
var canvas = document.getElementById('bar');
var randomScalingFactor = function() {
  return Math.round(Math.random() * 100)
};
var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,0.8)",
      highlightFill: "rgba(220,220,220,0.75)",
      highlightStroke: "rgba(220,220,220,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
      label: "My Second dataset",
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,0.8)",
      highlightFill: "rgba(151,187,205,0.75)",
      highlightStroke: "rgba(151,187,205,1)",
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

  }
  // 
var bar = new Chart(canvas.getContext('2d')).Bar(barChartData, {
  tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>kb",
  animation: false,
});
// 
var legendHolder = document.createElement('div');
legendHolder.innerHTML = bar.generateLegend();

document.getElementById('legend').appendChild(legendHolder.firstChild);

ul {
  list-style: none;
}
ul li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  height:20px;
  width: 140px;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  border-radius: 5px;
  height:20px
}

li span.bar-legend-text {
  left:25px;
  width:120px;
}
#chart-area > *{
  float:left
    }

<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.min.js"></script>
<div id="chart-area">
  <canvas id="bar" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
  <div id="legend"></div>
</div>

http://jsfiddle.net/masiht/r5g6a3cd/