<!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<table style="border: 1px solid #000000; width: 347; height: 186;">
	<tr><td style="border-style: solid; border-width: 1px; text-align: center; width: 125;">Data (x,y):</td>
	<td rowspan="3" style="border-style: solid; border-width: 1px; width: 289px;">
		<canvas id="myCanvas" width="300px" height="230px"></canvas>
	</td></tr>
	<tr><td style="width: 125; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; text-align: center; height: 159px;">
		<textarea id="txy" name="txtXY" style="width: 65px; height: 148px" tabindex="1">1,3
2,7
3,6
4,0
5,6
7,9</textarea></td></tr>
	<tr><td style="text-align: center; border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; width: 125; height: 35px;">
		<input name="btnPrev" type="button" value="Preview" id="prv" tabindex="2" onclick="plot()" /></td></tr>
</table>
<script>
    var cnv = document.getElementById('myCanvas')
    var txy= document.getElementById('txy')
    //txy.focus()

function plot(){
	x= new Array()
	y= new Array()
	var rData= txy.value
	row= rData.split("\n")
	for (var i in row){
		xy= row[i].split(",")
		x.push(xy[0])
		y.push(xy[1])
	}
	plotData(x,y, cnv)
}
function plotData(arrX, arrY, Canvas){
    var ctx = Canvas.getContext('2d'), cW= Canvas.offsetWidth, cH= Canvas.offsetHeight
	ctx.setTransform(1, 0, 0, 1, 0, 0)
    ctx.fillStyle="rgb(255,243,240)"
    ctx.fillRect(0,0,cW,cH)

    ctx.strokeStyle='black'        
    ctx.beginPath()
	ctx.moveTo(0.1*cW, 0.05*cH)
	ctx.lineTo(0.08*cW, 0.08*cH)
	ctx.moveTo(0.1*cW, 0.05*cH)
	ctx.lineTo(0.12*cW, 0.08*cH)
	ctx.moveTo(0.1*cW, 0.05*cH)	
	ctx.lineTo(0.1*cW, 0.9*cH)
	ctx.lineTo(0.95*cW, 0.9*cH)
	ctx.lineTo(0.92*cW, 0.88*cH)
	ctx.moveTo(0.95*cW, 0.9*cH)
	ctx.lineTo(0.92*cW, 0.92*cH)
    ctx.stroke()
    ctx.translate(0.1*cW, 0.9*cH)
    ctx.scale(1,-1)
    ctx.stroke()
    
    var minX= Math.min.apply(null, arrX), minY= Math.min.apply(null, arrY)
    var maxX= Math.max.apply(null, arrX), maxY= Math.max.apply(null, arrY)    
    var wX=maxX-minX, wY=maxY-minY
    var gW=0.95*cW-0.1*cW, gH=0.9*cH-0.05*cH
    var facX=gW/wX, facY=gH/wY
    
    ctx.beginPath()
    ctx.fillStyle='Blue'
    ctx.strokeStyle='brown'    
    ctx.lineWidth= 0.002*(cW+cH)
	var sqW=0.02*cW, sqH=0.02*cH
	var newX, newY
	for (var i in arrX){
		newX= (arrX[i]-minX)*facX
		newY= (arrY[i]-minY)*facY
    	ctx.fillRect(newX-sqW/2, newY-sqH/2, sqW, sqH)
    	if (i==0)
    		ctx.moveTo(newX,newY) 
    	else 
    		ctx.lineTo(newX,newY)
    }
    ctx.stroke()
	
	ctx.scale(1,-1)
    ctx.fillStyle='darkblue'
 	ctx.textBaseline= 'middle'
	ctx.textAlign= 'center'	
	var fntSize=0.02*(cW+cH)
   	ctx.font= fntSize+"pt serif"
   	var txtB= '('+minX+','+minY+')'
   	var txtBW=ctx.measureText(txtB).width
   	if (txtBW>0.1*cW) txtBW=0.1*cW
    ctx.fillText(txtB, -txtBW/2, 0.05*gH, txtBW)
    ctx.beginPath()
    for (i=1;i<=5;i++){
    	ctx.moveTo(i*gW/6, 0.02*cH)
    	ctx.lineTo(i*gW/6, -0.02*cH)
	   	txtB= Math.round((i/6*wX+minX)*100)/100
	   	txtBW=ctx.measureText(txtB).width
	   	if (txtBW>0.06*cW) txtBW=0.06*cW	    
	    ctx.fillText(txtB, i*gW/6, 0.06*cH, txtBW)
    	
    	ctx.moveTo(0.02*cW, -i*gH/6)
    	ctx.lineTo(-0.02*cW, -i*gH/6)    	
	   	txtB= Math.round((i/6*wY+minY)*100)/100
	   	txtBW= ctx.measureText(txtB).width
	   	if (txtBW>0.06*cW) txtBW=0.06*cW	    
	    ctx.fillText(txtB, -0.06*cW, -i*gH/6, txtBW)
    }
    ctx.strokeStyle='magenta'
    ctx.stroke()

}

</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>