Chart

by Angeli Schwartz

HTML

<canvas id="imgcanvas" width="650" height="350">
 </canvas>

CSS

canvas {
    border:2px solid blue;
}
#output {
    border: 1px solid gray;
}
div {
   float:center;
}
p {
clear: both;
}

JavaScript

var array1 = [[100,100], [150, 50], [200,185],
							[250,185], [300,250], [350,100], [400,250],
              [450,100], [500,20], [550,80], [600,120]];
              
var array2 = [[100,100], [150, 150], [200,135],
							[250,285], [300,150], [350,150], [400,280],
              [450,100], [500,120], [550,80], [600,190]];
              
var array3 = [[100,200], [150, 100], [200,35],
							[250,185], [300,10], [350,15], [400,80],
              [450,100], [500,20], [550,80], [600,120]];
              
var imgcanvas = document.getElementByID("imgcanvas");

if (imgcanvas.getContext) {
	var ctx = imgcanvas.getContext('2d');
  
  //rectangle wraping line chart
  ctx.strokeRect(0,0.600,300);
  
  //first line
  ctx.beginPath();
  ctx.moveTo(0.100);
  for (var i = 0; i < array1.length; i++) {
  	ctx.lineTo(array1[i][0]), array1[i][1]);
  }
  ctx.stroke();
  
  setTimeout(function() {
  	ctx.strokeStyle="#ff0000";
    
    //second line
    ctx.beginPath();
    ctx.moveTo(0,100);
    for (var i = 0; i < array2.length; i++) {
    	ctx.lineTo(array2[i][0], array2[i][1]);
    }
    ctx.stroke();
    
    //second time out
    setTimeout(function() {
    	ctx.strokeStyle="#00ff00";
      ctx.fillStyle="rgba"(255,255,0,.1)";
      
      //third line
      ctx.beginPath();
      ctx.moveTo(0,100);
      for (var i = 0; i < array3.length; i++) {
      	ctx.lineTo(array3[i][0],array3[i][1]);
      }
      
      ctx.stroke();
    }, 5000);
}, 5000);
}