canvas time chart

just a canvas time chart to represent the variation of a generic quantity against time

by abidibo

HTML

<h1>Canvas</h1>
<canvas id="graph" width="800" height="500"></canvas>
<script type="text/javascript">
  var mygraph = new tcg.graph('graph');
</script>

CSS

body {
  margin: 0;
  padding: 10px;
}

JavaScript

// new namespace
var tcg = {};

// main graph controller
tcg.graph = new Class({

  options: {
    x_grid_step: 20, // grid step in px on x axis
    y_grid_step: 40, // grid step in px on y axis
    x_factor: 1, // multiplier factor of each grid step on x axis (value = m * grid-steps)
    y_factor: 10, // multiplier value of each grid step on y axis (value = m * grid-steps)
    x0: 40, // x coordinate (from bottom left) in px of the axis origin
    y0: 40,// y coordinate (from bottom left) in px of the axis origin
    cursor_width: 12, // width of the cursor rectangle
    first_point: [0, 0], // first point values [x, y]
  },
  Implements: [Options],
  /*
   * There are here three coordinate systems:
   * - ccoord: the coordinates of the canvas, starting from top left
   * - coord: the coordinates defined by the drawed axis
   * - values: the real properties values
   *
   * So there are some conversion functions.
   * The drawed axis coordinates are always used.
   */
  initialize: function(canvas_id, options) {

    this.setOptions(options);

    this.canvas = $(canvas_id);
    this.initCanvas();

    // temp canvas used for previews
    this.initTempCanvas();

    // undo redo functionality
    this.setUndoRedo();

    // init some store useful arrays
    this.points = [];
    this.redo_canvas = [];
    this.undo_canvas = [];
    this.redo_points = [];
    this.undo_points = [];

    // add first point
    first_point_coord = this.valuesToCoords(this.options.first_point[0], this.options.first_point[1]);
    this.addPoint(first_point_coord.x, first_point_coord.y);

  },
  /*
   * Numeric values to axis coordinates
   */
  valuesToCoords: function(vx, vy) {
    var x = vx / this.options.x_factor * this.options.x_grid_step;
    var y = vy / this.options.y_factor * this.options.y_grid_step;

    return {x: x, y: y};
  },
  coordsToValues: function(x, y) {
    var vx = x / this.options.x_grid_step * this.options.x_factor;
    var vy = y / this.options.y_grid_step *...