Lines Stats Graph

je5.es
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>je5 lines Stats</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="http://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
	</head>
	<body>
		<canvas width="520" height="250" id="line"></canvas>
	<script type="text/javascript">
		////create the canvas
		$('#line').je5({ 
			sort:'canvas', 
			draw:'rectangle',
			x:40, 
			y:40, 
			width:520, 
			height:165,
			fillStyle:'grey'
		});
		
		$('#line').je5({
			sort:'stats',
			draw:{
				type:'line',
				att:{
					zoomIn:40,//Adjust the size of the line
					center:{//adjusting the canvas coordinates to the start point to draw lines
						x:0,
						y:241
					},
					data:{
						valuesy:[1, 3, 2, 5, 2, 4, 1, 2, 2, 4, 4, 1],
						//the total number of elements in the array indicates the number of x fields, the values of each of the elements 
						//are the y coordinates. These values will be added to the value of zoomin. valuesy:[1  = 'Jan','$100'
						lineCap:'round',//values ??of the lines 
						strokeStyle:'yellow',
						lineWidth:6,
						x:{//Text values of the x coordinate
							textx:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct','Nov','Dez'],
							font:'12pt Calibri',
							fillStyle:'blue',
							adjust:20//used to adjust the distance between text and canvas
						},
						y:{//Text values of the y coordinate
							texty:['$100', '$200', '$300', '$400', '$500'],
							font:'12pt Calibri',
							fillStyle:'red'
						}
					}
				}	
			}
		});

		//create the grid background
		for(a = 0; a < 7; a++) {
			b = a + 1;
			$('#line').je5({ 
				sort:'canvas', 
				draw:'line', 
				strokeStyle:'#fff', 
				lineWidth:0.8, 
				lineCap:'round',
				moveTo_x:40, 
				moveTo_y:b * 40, 
				lineTo_x:520, 
				lineTo_y:b * 40
			});
		}

		for(a = 0; a < 13; a++) {
			b = a + 1;
			$('#line').je5({ 
				sort:'canvas', 
				draw:'line', 
				strokeStyle:'#fff', 
				lineWidth:0.8, 
				lineCap:'round',
				moveTo_x:b * 40, 
				moveTo_y:40, 
				lineTo_x:b * 40, 
				lineTo_y:250, 
				shadow_c:'red'
			});
		}
	</script>


	</body>
</html>