<div class='row'>
  <h2>X</h2>
  <canvas id='x-canvas' width='80' height='40'></canvas>
  <ul id='x' class='history'>
    <li>No Data Yet</li>
  </ul>
</div>

 // Graph
 ;(function(){
   var app = this.app || (this.app={});
 
   // A bar chart for - Max Value to + Max Value.
   app.Graph = (function(){
     function Graph(canvasId, maxValue){
       this.canvas = document.getElementById(canvasId);
       if (this.canvas) {
        this.context = this.canvas.getContext('2d');
      }

      // set the Y unit scale.
      this.unit = this.canvas.height / 2 / maxValue; // divide by 2 because half for + and half for -.
    }
    Graph.prototype.drawBar = function(x, value) {
      var c = this.context;
      c.beginPath();
      c.moveTo(x, this.canvas.height/2); // middle
      c.lineTo(x, this.canvas.height/2 - value * this.unit);
      c.lineWidth = 3;
      c.strokeStyle = "#222";
      c.stroke();
      c.closePath();
    };
    Graph.prototype.render = function(dataArray) {
      this.canvas.width = this.canvas.width;
      for (var i=0, len=dataArray.length; i<len; i++) {
        this.drawBar(i*5, dataArray[i]);
      }
    }
    return Graph;
  })();
}).call(this);

var graphX = new app.Graph('x-canvas', 2.5);
graphX.render(app.xValues);