Wavy Clock Graph

Draws a graph in the style of the Energy Clock

HTML

<!-- 
A radial clock graph in JavaScript

Contact: @loleg http://oleg.utou.ch

Creative Commons Attribution 3.0 Unported License
http://creativecommons.org/licenses/by/3.0/
-->
<div><canvas></canvas></div>
<script>
    var c = document.getElementsByTagName('canvas')[0];
    var b = document.body;
    var a = c.getContext('2d');
    var screen_width  = c.width  = 500;
    var screen_height = c.height = 500;
    var pachube_data =...

CSS

canvas { border:1px solid #aaa; }
small { font:italic 8pt lucida,sans-serif; color:#888; }

JavaScript

function radialGraph() {
    this.X = 0, this.Y = 0;
    this.FaceColor = "grey",
    this.LineColor = "black", 
    this.InnerColor = "white", 
    this.OuterColor = "white",
    this.Radius = 0;
    
    this.plotDataPoints = function(data) {
        a.save();
        a.translate(this.X, this.Y);
        
        a.strokeStyle = this.LineColor;
        g = a.createRadialGradient(0, 0, 0, 0, 0, this.Radius);
        g.addColorStop(0, this.InnerColor);
        g.addColorStop(1, this.OuterColor);
        a.fillStyle = g; 
               
        // determine range and parse values
        var numdata = [];
        var min = 9999999999, max = 0;
        for (var i = 0; i < data.length; i++) {
            var amount = parseInt(data[i].value);
            max = (max < amount) ? amount : max;
            min = (min > amount) ? amount : min;
            numdata.push(amount);
        }
        var scale = this.Radius / (max - min);
        
        // plot routing
        a.beginPath();
        var sp = false;
        for (var i = 0; i < numdata.length; i++) {
            var amount = (numdata[i] - min) * scale;
            
            dx1 = amount * Math.sin(6.28 * (i / data.length));
            dy1 = amount * Math.cos(6.28 * (i / data.length));
            
            if (!sp) {
                sp = [dx1, dy1];
                a.moveTo(dx1, dy1);  
            } else {
                a.lineTo(dx1, dy1);
            }
        }
        // complete the graph
        a.lineTo(sp[0], sp[1]);
        
        a.stroke();
        a.fill();
        a.restore();
    }
        
    this.plotClockFace = function() {
        a.save();
        a.translate(this.X, this.Y);
        
        a.beginPath();
        a.strokeStyle = this.FaceColor;
        a.arc(0, 0, this.Radius, 0, Math.PI * 2, false);
        a.closePath();
        a.stroke();
        
        a.restore();
    }
}

var s = new radialGraph();
s.X = screen_width / 2;
s.Y = screen_height / 2;
s.Radius =...