$(function () {
    var somecoloursets = [
        {
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff"
        },
        {
            fillColor: "rgba(220,80,220,0.5)",
            strokeColor: "rgba(220,80,220,1)",
            pointColor: "rgba(220,80,220,1)",
            pointStrokeColor: "#fff"
        },
        {
            fillColor: "rgba(220,220,80,0.5)",
            strokeColor: "rgba(220,220,80,1)",
            pointColor: "rgba(220,220,80,1)",
            pointStrokeColor: "#fff"
        },
        {
            fillColor: "rgba(80,220,220,0.5)",
            strokeColor: "rgba(80,220,220,1)",
            pointColor: "rgba(80,220,220,1)",
            pointStrokeColor: "#fff"
        }
    ];

    $.getJSON('/que/allaverage', function(data) {
        var labels = [];
        for (var i = 0; i < data.length; i++) {
            labels[labels.length] = data[i].time;
        }

        // dict containing name of category with list of data points over time
        var result = {};
        for (var name in data[0].categories) {
            result[name] = [];
            for (var i = 0; i < data.length; i++) {
                result[name][i] = data[i].categories[name];
            }
        }

        var datasets = [];
        for (var name in result) {
            var colourset = somecoloursets.pop();
            colourset.data = result[name];

            datasets[datasets.length] = colourset;

            $('.graph-key ul').append('<li style="background-color:' +
                                   colourset.fillColor + '">' +
                                   '<span>' + name + '</span>' +
                                   '</li>');

        }

        var data = {
            labels : labels,
            datasets : datasets
        }

        var ctx = document.getElementById("that-big-graph").getContext("2d");

        var opts = {
            //Boolean - If we want to override with a hard coded scale
            scaleOverride : true,

            //** Required if scaleOverride is true **
            //Number - The number of steps in a hard coded scale
            scaleSteps : 10,
            //Number - The value jump in the hard coded scale
            scaleStepWidth : 1,
            //Number - The scale starting value
            scaleStartValue : 0
        }

        new Chart(ctx).Line(data, opts);
    });
});

@@ -884,24 +884,692 @@
 ion(data) %7B%0A
+        var ctx = document.getElementById(%22that-big-graph%22).getContext(%222d%22);%0A%0A        var opts = %7B%0A            //Boolean - If we want to override with a hard coded scale%0A            scaleOverride : true,%0A%0A            //** Required if scaleOverride is true **%0A            //Number - The number of steps in a hard coded scale%0A            scaleSteps : 10,%0A            //Number - The value jump in the hard coded scale%0A            scaleStepWidth : 1,%0A            //Number - The scale starting value%0A            scaleStartValue : 0%0A        %7D%0A%0A        if (data.length %3C 1) %7B%0A            new Chart(ctx).Line(%7Blabels: %5B%5D, datasets: %5B%5D%7D, opts);%0A            return;%0A        %7D%0A%0A
         var 
@@ -2571,547 +2571,8 @@
  %7D%0A%0A
-        var ctx = document.getElementById(%22that-big-graph%22).getContext(%222d%22);%0A%0A        var opts = %7B%0A            //Boolean - If we want to override with a hard coded scale%0A            scaleOverride : true,%0A%0A            //** Required if scaleOverride is true **%0A            //Number - The number of steps in a hard coded scale%0A            scaleSteps : 10,%0A            //Number - The value jump in the hard coded scale%0A            scaleStepWidth : 1,%0A            //Number - The scale starting value%0A            scaleStartValue : 0%0A        %7D%0A%0A
     

Make graph gracefully handle case where no data is returned