Create Graph in HTML5 Canvas

HTML5 is a new web technology growing rapidly. In this article I will explain you how to create a simple graph in HTML5 canvas. We will draw a graph on the canvas dynamically using JavaScript. This kind of HTML5 Graph will be more useful to show the website performance, website visitor etc…

Create Graph in HTML5 Canvas

You can view demo and download the HTML5 Canvas Graph creation in Javascript below:

Live Demo Download

First we will create a HTML5 document with a Canvas having id of graph.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Graph</title>
</head>
<body>
<canvas id="graph" width="772" height="227"></canvas>
</body>
</html>

Next we will place an image inside the Canvas graph. Create a JavaScript function and set image for canvas.

function drawGraph()
{
	//Createa 2d element
var graph=document.getElementById('graph').getContext('2d');
	//Create a new Image
	var img= new Image();
	img.onload=function(){
		//Start display of image from top left of the canvas
		graph.drawImage(img,0,0);
	}
	//Path for the image
	img.src='graph.jpg';
}

We need to call this function on page load

body onLoad="drawGraph();"

this will place image on Canvas. Next we need to draw Graph Lines. To draw a stroke(Line) on canvas first we need to mention the X and Y position. I have used a set of X and Y axis as array to draw the graph. Draw the lines and circles to create graph.

Our Final code will look like this

function drawGraph()
{
	//Createa 2d element
var graph=document.getElementById('graph').getContext('2d');
	//Create a new Image
	var img= new Image();
	img.onload=function(){
		//Start display of image from top left of the canvas
		graph.drawImage(img,0,0);
		
		//Stroke width
		graph.lineWidth=4;
		//Joint Shape
		graph.lineJoin="round";
		//Stroke Color
		graph.strokeStyle="#058dc7";
		
		//Begain Drawpath
		graph.beginPath();
		//Starting Point of the stroke (x and Y)
		graph.moveTo(12,86);
		
		//Array of x and y values on canvas
		var myArray='{"success": true,"axis": [{"x": 48,"y": 102},{"x": 84,"y": 106},{"x": 118,"y": 112},{"x": 154,"y": 136},{"x": 190,"y": 106},{"x": 224,"y": 104},{"x": 262,"y": 102},{"x": 298,"y": 106},{"x": 334,"y": 104},{"x": 368,"y": 118},{"x": 438,"y": 98},{"x": 512,"y": 106},{"x": 582,"y": 158},{"x": 620,"y": 144},{"x": 654,"y": 134},{"x": 688,"y": 102},{"x": 724,"y": 80},{"x": 760,"y": 68}]}';
		
		//Draw line from array loop
		var jsonData = JSON.parse(myArray);
		for (var i = 0; i < jsonData.axis.length; i++) {
			var counter = jsonData.axis[i];
		//Draw line
		graph.lineTo(counter.x,counter.y);
		}
		//fill stroke
		graph.stroke();
		
		//Add rounds at the joinings of the strokes
		//Circle Color
		graph.fillStyle = "#058dc7";
		//Draw round from array loop
		for (var i = 0; i < jsonData.axis.length; i++) {
			//Draw Path
			graph.beginPath();
			var axis = jsonData.axis[i];
			//Draw
			graph.arc(axis.x, axis.y, 5, 0, Math.PI*2, true); 
			//Close the path
			graph.closePath();
			//Fill the circle
			graph.fill();
		}
	}
	//Path for the im,age
	img.src='graph.jpg';
}

View demo or download the script above. Hope this will help you. Don't forget to make email subscription for future articles and news.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>