Sample implementation for Chart.js

sample-chart.js

var ctx = document.getElementById("graph").getContext("2d");
var data = {
    labels: ["2011", "2012", "2013"],
    datasets: [
        {
            label: "Trainer Score",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [1, 5, 2]
        },
        {
            label: "Music Score",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [2, 1, 4]
        },
        {
            label: "Vibe Score",
            fillColor: "rgba(229,162,18,0.2)",
            strokeColor: "rgba(229,162,18,1)",
            pointColor: "rgba(229,162,18,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [4, 3, 5]
        },
        {
            label: "Workout Score",
            fillColor: "rgba(237,12,12,0.2)",
            strokeColor: "rgba(237,12,12,1)",
            pointColor: "rgba(237,12,12,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [2, 3, 1]
        }
    ]
};

var myLineChart = new Chart(ctx).Line(data, {
    animationSteps: 15,
    animationEasing: "easeInOutExpo",
    scaleOverride: true,
    scaleSteps: 4,
    scaleShowLabels : true,
    scaleStepWidth: 1,
    scaleStartValue: 1,
    multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
});