Chart Js Template

Base for Chart JS

HTML

<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="myChart" width="800" height="400"></canvas>

JavaScript

var options = {
    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
    scaleBeginAtZero : true,

    //Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,

    //String - Colour of the grid lines
    scaleGridLineColor : "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth : 1,

    //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowHorizontalLines: true,

    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,

    //Boolean - If there is a stroke on each bar
    barShowStroke : true,

    //Number - Pixel width of the bar stroke
    barStrokeWidth : 2,

    //Number - Spacing between each of the X value sets
    barValueSpacing : 50,

    //Number - Spacing between data sets within X values
    barDatasetSpacing : 5,

    //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].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

};

var data = {
    labels: ["Room 1", "Room 2", "Room 3"],
    datasets: [
        {
            label: "Group 1",
            fillColor: "rgba(87,123,128,1)",
            strokeColor: "rgba(255,255,255,0)",
            highlightFill: "rgba(77,108,118,1)",
            highlightStroke: "rgba(225,225,225,0)",
            data: [25, 50, 100]
        },
        {
            label: "Global Dataset",
            fillColor: "rgba(56,68,59,1)",
            strokeColor: "rgba(255,255,255,0)",
            highlightFill: "rgba(45,54,45,1)",
            highlightStroke: "rgba(225,225,225,0)",
            data: [50, 100, 20]
        }
    ]
};

// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#myChart").get(0).getContext("2d");
// This will get the first returned node in...