Wanikani stats

<html>
<head>
<script src="./jquery.min.js"></script>
<script src="./RGraph.common.core.js"></script>
<script src="./RGraph.line.js"></script>
<script>

function user() {
    var apikey = $("#apikey").val();
    //$.ajax({dataType:'json', url:'http://localhost:8000/user.txt', success:function(data) {
    $.ajax({dataType:'jsonp', url:'http://www.wanikani.com/api/user/' + apikey + '/user-information', success:function(data) {

        if (data.error && data.error.code == 'user_not_found') {
            $("#output").html("Invalid API Key");
        } else {
            var level = data.user_information.level;
            if (level == 1) {
                $("#output").html("Please wait until you are level 2 before using this page.");
            } else {
                graph(level, apikey);
            }
        }
    }
    });
}

function dateToString(date) {
    var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
    return "" + date.getUTCDate() + " " + months[date.getUTCMonth()] + " " + date.getUTCFullYear();
}

function getAverageDaysAndHours(averageTime) {
    var averageDays = Math.floor(averageTime / 86400);
    var averageHours = Math.floor((averageTime - averageDays * 86400) / 3600);

    return {days: averageDays, hours: averageHours};
}

function graph(level, apikey) {
   //$.ajax({dataType:'json', url:'http://localhost:8000/level.txt', success: function(data) {

   // API: If the levels argument is not specified, then all levels up to the user's level will be returned.
   $.ajax({dataType:'jsonp', url:'http://www.wanikani.com/api/user/' + apikey + '/radicals', success: function(data) {
        var levelTimes = new Array(level);
        var info = data.requested_information;

        for (var i = 0; i < info.length; i++) {
            // we need values only for radicals with level more than 1
            var id = info[i].level - 2;
            var stats = info[i].stats;

            if (stats && id >= 0 && (!levelTimes[id] || stats.unlocked_date < levelTimes[id]))
                levelTimes[id] = stats.unlocked_date;
        }

        // don't count current level, we need only finished ones
        --level;
        levelTimes.pop();

        // no unlocked items on current level
        if (levelTimes[levelTimes.length - 1] == undefined) {
            --level;
            levelTimes.pop();
        }

        var minDate = new Date(levelTimes[0] * 1000);
        minDate = new Date(Date.UTC(minDate.getFullYear(), minDate.getMonth()));

        var maxDate = new Date(levelTimes[level - 1] * 1000);
        maxDate = new Date(Date.UTC(maxDate.getFullYear(), maxDate.getMonth() + 1));

        var xLabels = new Array(level);
        for (var i = 1; i <= level; i++) {
            xLabels[i-1] = i;
        }

        var timeDiff = (maxDate.getTime() - minDate.getTime()) / 4;
        var yLabels = new Array(5);
        var minTime = minDate.getTime();

        for (var i = 4; i >= 0; i--) {
            yLabels[i] = dateToString(new Date(minTime + (4 - i) * timeDiff));
        }

        var line = new RGraph.Line("graph", levelTimes);

        line.Set('chart.ymin', minDate.getTime() / 1000);
        line.Set('chart.ymax', maxDate.getTime() / 1000);
        line.Set('chart.labels', xLabels);
        line.Set('chart.ylabels.count', 5);
        line.Set('chart.numyticks', 4);
        line.Set('chart.ylabels.specific', yLabels);
        line.Set('chart.background.grid.autofit.numhlines', 4);
        line.Set('chart.background.grid.autofit.numvlines', level - 1);

        line.Set('chart.gutter.left', 100);

        line.Draw();

        var averageTime = (levelTimes[level - 1] - levelTimes[0]) / (level - 1);

        var av = getAverageDaysAndHours(averageTime);

        $("#output").html("Your average time for completing a level is " + av.days + " days and " + av.hours + " hours.</br>");

        var targetTime = levelTimes[0] + 50 * averageTime;
        var targetDate = new Date(targetTime * 1000);
        $("#output").append("At this rate you will have finished all 50 levels by " + dateToString(targetDate) + ".");

        var table = '<table border=1><tr><th>Level</th><th>Finished</th><th>Time</th></tr>';

        var prevTime = data.user_information.creation_date;

        for (var i = 0; i < levelTimes.length; i++) {
            av = getAverageDaysAndHours(levelTimes[i] - prevTime);
            prevTime = levelTimes[i];
            table += '<tr><td>' + (i + 1).toString() + '</td><td>' + dateToString(new Date(levelTimes[i] * 1000)) + '</td><td>' + av.days + ' days and ' + av.hours + ' hours</td></tr>';
        }

        table += '</table>';

        $("#progress").html("Registered: " + dateToString(new Date(data.user_information.creation_date * 1000)) + "</br>" + table);
    }
    });
}

function ready() {
    $("#showgraph").click(user);
}

$(document).ready(ready);

</script>
</head>
<body>
API Key:
<input id="apikey"/>
<input type="button" id="showgraph" value="Show graph"/><br/><br/>
<div id="output"></div><br/>
<canvas id="graph" style="float: left" width="1024" height="640">[No canvas support]</canvas>
<div id="progress"></div><br/><br/>
</body>
</html>