 |
| Preview of Line Graph made by canvas. |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Line Graph</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
window.onload=function(){
var can=document.getElementById("mc");
/*can.width=250;
can.height=200;*/
if(can && can.getContext)
{
var mc=can.getContext('2d');
if(mc)
{
//This section is background color
mc.globalAlpha=0.1;
for(var b=0;b<10;b++)
{
mc.strokeStyle="#aaa";
mc.fillStyle="#999";
mc.globalAlpha +=0.1;
mc.lineWidth=20;
mc.beginPath();
mc.fillRect(10,50*b,600,25);
mc.fill();
}
//This is the left side number Ranges
for(var r=0;r<10;r++)
{
mc.fillStyle="red";
mc.font="20px vardana";
mc.fillText(50*r,0,500-(50*r))
}
//This is responsible for Bar Graph and month name
var num=[0,120,250,160,458,360,330,180,455,110,360,390];
var mon=['0','jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
mc.fillStyle="#999";
mc.globalAlpha=1;
mc.lineWidth=10;
mc.lineCap="round";
for(var c=1;c<num.length;c++)
{ mc.beginPath();
//Thi if loop is marking the bar which is higher than a given range and change the color of bar for identify
if(num[c]>350)
{
mc.strokeStyle="#009";
}
else{
mc.strokeStyle="#555";
}
mc.moveTo(50*c,600);
mc.lineTo((50*c),mc.canvas.height-num[c]);
mc.stroke();
mc.fillStyle="green";
mc.font="20px Tahoma";
mc.fillText(mon[c],50*c+3,490);
}
//This is the line which is gone left to right
mc.strokeStyle="green";
mc.lineWidth=5;
mc.lineJoin="round";
mc.beginPath();
mc.moveTo(0,250);
mc.lineTo(100,200);
mc.lineTo(150,290);
mc.lineTo(200,380);
mc.lineTo(250,300);
mc.lineTo(300,290);
mc.lineTo(350,200);
mc.lineTo(400,100);
mc.lineTo(450,150);
mc.lineTo(500,250);
mc.lineTo(550,310);
mc.stroke();
mc.font="bold 15px arial";
mc.rotate(0.4);
mc.fillText(' Companys avg sell in BD',105,130);
}
}
}
</script>
</head>
<body>
<canvas id="mc" width="600" height="500px">
Sorry your browser does not support canvas tag.Upgrade to latest version pls
</canvas>
</body>
</html>
