Html Codes: Canvas- Plot Data in Smart X-Y Chart

One useful tool for websites is plotting feature. The users' posts per day, download counts per hour and etc. are examples of statistical plots which are more usual. HTML5 Canvas combination with Javascript is powerful tool for easily drawing plots. In the following example we have a smart XY plot. It is not depends on the width and heights of the plot and data ranges. It smartly adjusts the specified area and rescales the data to be proper for drawing. Note that many other features can also get added to our HTML5 Canvas Plotter based on what is needed.

<!-- 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>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Plot Data in Smart X-Y Chart

You can leave comments once you sign in/up.

Review

Links