radial-chart-plot.js

var canvas = document.getElementById('plot');
var context = canvas.getContext('2d');

var CHART_SIZE = 100;
var MAX_VALUE = Number.MAX_SAFE_INTEGER;
var MIN_VALUE = 0;
var chartSize = CHART_SIZE;
var chartData = [];

var i = 0;
var len = 0;

for (i = 0; i < 5; ++i) {
    chartData.push({
        label: 'label' + (i + 1),
        value: 10
    });
}

len = chartData.length;
var degreePerData = 2 * Math.PI / len;
var values = chartData.map(function (val) {
    return val.value;
});
var maxValue = Math.max.apply(Math, values);
var minValue = Math.min.apply(Math, values);

var data, posX, posY, sizeFactor, degree;
var plotData = chartData.slice();
for (i = 0; i < len; ++i) {
    data = chartData[i];

    sizeFactor = chartSize * (data.value / maxValue);
    degree = degreePerData * i;

    plotData[i].x = sizeFactor * Math.cos(degree - Math.PI / 2);
    plotData[i].y = sizeFactor * Math.sin(degree - Math.PI / 2);
}

var xValues = plotData.map(function (val) {
    return val.x;
});
var yValues = plotData.map(function (val) {
    return val.y;
});
var minX = Math.min.apply(Math, xValues);
var minY = Math.min.apply(Math, yValues);
var maxX = Math.max.apply(Math, xValues);
var maxY = Math.max.apply(Math, yValues);

for (i = 0; i < len; ++i) {
    plotData[i].x = plotData[i].x - minX;
    plotData[i].y = plotData[i].y - minY;
}

context.fillStyle = '#f00';
context.beginPath();
len = plotData.length;
for (i = 0; i < len; ++i) {
    data = plotData[i];
    console.log(data);
    if (i == 0) {
        context.moveTo(data.x, data.y);
    } else {
        context.lineTo(data.x, data.y);
    }
}
context.closePath();
context.fill();

context.clearRect((maxX - minX) / 2 - 5, (maxY - minY) / 2 - 5, 10, 10);