HTML5 Canvas Graph

by Andreas Renberg

HTML

<canvas id="graph"></canvas>

CSS

#graph{
  background-color: #BBB;
}

JavaScript

var graph;
var c;
var g_width = 800;
var g_height = 600;
var xPadding = 40;
var yPadding = 40;

var startVal = 0;
var endVal = 1;

function getZenoTween(speed, time, deltaTime) {
  var values = [];
  var progress = startVal;
  
  for (i = 0; i < time; i+= deltaTime) {
    values.push( {X:i, Y:progress});
    progress += (endVal - progress) * speed;
  }
  
  // Save the final value
  values.push( {X:i, Y:progress});
  return values;
}

var data_1fps  = getZenoTween(0.5, 10, 1/1);
var data_10fps = getZenoTween(0.5, 10, 1/10);
var data_30fps = getZenoTween(0.5, 10, 1/30);
var data_60fps = getZenoTween(0.5, 10, 1/60);

var data = [].concat(data_1fps, data_10fps, data_30fps, data_60fps);
var graphs = [data_1fps, data_10fps, data_30fps, data_60fps];

// Returns the max Y value in our data list
function getMaxY() {
    var max = 0;
    
    for(var i = 0; i < data.length; i ++) {
        if(data[i].Y > max) {
            max = data[i].Y;
        }
    }
    
    max += 10 - max % 10;
    return max;
}

// Returns the max X value in our data list
function getMaxX() {
    var max = 0;
    
    for(var i = 0; i < data.length; i ++) {
        if(data[i].X > max) {
            max = data[i].X;
        }
    }
    
    max += 10 - max % 10;
    return max;
}

// Return the x pixel for a graph point
function getXPixel(val) {
    // uses the getMaxX() function
    return ((graph.width - xPadding) / getMaxX()) * val + (xPadding * 1.0);
}

// Return the y pixel for a graph point
function getYPixel(val) {
    return graph.height - (((graph.height - yPadding) / getMaxY()) * val) - yPadding;
}

function getPosition(event){
    var x = new Number();
    var y = new Number();
    var canvas = document.getElementById("graph");

    if (event.x != undefined && event.y != undefined){
      x = event.x;
      y = event.y;
    }
    else {
      x = event.clientX + document.body.scrollLeft +
      document.documentElement.scrollLeft;
      y = event.clientY + document.body.scrollTop +
    ...