Create an HTML5 canvas graph with javascript. DemoDownload

Today we will be creating a graph that looks similar to the Google Analytics Graph using HTML5 Canvas and Javascript to draw the graph. HTML5 Graph has many uses including website statistics, pageviews, visits, and so on. We will cover the basics of creating a simple graph.

The Markup

We need to trigger the NewGraph() function when the document loads. To achieve this we will be using the onLoad event.

<body onLoad="NewGraph();"></body> 1 < body onLoad = "NewGraph();" > < / body >

We use the <canvas> element to draw the image to.

<canvas id="graph" width="1075" height="175"></canvas> 1 < canvas id = "graph" width = "1075" height = "175" > < / canvas >

The whole HTML5 markup below:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML5 Canvas Graph</title> </head> <body onLoad="NewGraph();"> <canvas id="graph" width="1075" height="175"></canvas> </body> </html> 1 2 3 4 5 6 7 8 9 10 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" / > < title > HTML5 Canvas Graph < / title > < / head > < body onLoad = "NewGraph();" > < canvas id = "graph" width = "1075" height = "175" > < / canvas > < / body > < / html >

The Javascript

Now for the javascript. The NewGraph() function will be called when the page loads. We start the JS with our function named NewGraph() .

function NewGraph() {} 1 function NewGraph ( ) { }

First, find the <canvas> element with the id of graph . Then, call its getContext() method (you must pass the string “2d” to the getContext() method). The getContext(“2d”) object is a built-in HTML5 object.

var graph = document.getElementById("graph").getContext("2d"); 1 var graph = document . getElementById ( "graph" ) . getContext ( "2d" ) ;

We will store the line values in an array() for the x and y values on canvas.

var NewLines = '{"success": true,"counters": [{"x": 5,"y": 150},{"x": 46,"y": 130},{"x": 85,"y": 133},{"x": 124,"y": 145},{"x": 163,"y": 115},{"x": 202,"y": 110},{"x": 241,"y": 102},{"x": 280,"y": 106},{"x": 319,"y": 150},{"x": 358,"y": 118},{"x": 397,"y": 98},{"x": 436,"y": 106},{"x": 475,"y": 148},{"x": 514,"y": 144},{"x": 553,"y": 134},{"x": 592,"y": 102},{"x": 631,"y": 30},{"x": 670,"y": 145},{"x": 709,"y": 135},{"x": 748,"y": 130},{"x": 787,"y": 150},{"x": 826,"y": 150},{"x": 865,"y": 110},{"x": 904,"y": 90},{"x": 943,"y": 30},{"x": 982,"y": 30},{"x": 1021,"y": 60},{"x": 1060,"y": 33}]}'; 1 var NewLines = '{"success": true,"counters": [{"x": 5,"y": 150},{"x": 46,"y": 130},{"x": 85,"y": 133},{"x": 124,"y": 145},{"x": 163,"y": 115},{"x": 202,"y": 110},{"x": 241,"y": 102},{"x": 280,"y": 106},{"x": 319,"y": 150},{"x": 358,"y": 118},{"x": 397,"y": 98},{"x": 436,"y": 106},{"x": 475,"y": 148},{"x": 514,"y": 144},{"x": 553,"y": 134},{"x": 592,"y": 102},{"x": 631,"y": 30},{"x": 670,"y": 145},{"x": 709,"y": 135},{"x": 748,"y": 130},{"x": 787,"y": 150},{"x": 826,"y": 150},{"x": 865,"y": 110},{"x": 904,"y": 90},{"x": 943,"y": 30},{"x": 982,"y": 30},{"x": 1021,"y": 60},{"x": 1060,"y": 33}]}' ;

Create an Image object.

var img = new Image(); 1 var img = new Image ( ) ;

Before you can draw the image, the image must be fully loaded. To determine if an image is fully loaded, we use the onload event.

img.onload = function() {} 1 img . onload = function ( ) { }

Start display of the image from top left of the canvas, x set to 0 and y set to 0 as well.

graph.drawImage(img, 0, 0); 1 graph . drawImage ( img , 0 , 0 ) ;

Line stroke width.

graph.lineWidth = 4; 1 graph . lineWidth = 4 ;

Line joint shape.

graph.lineJoin = "round"; 1 graph . lineJoin = "round" ;

Line stroke color.

graph.strokeStyle = "#666"; 1 graph . strokeStyle = "#666" ;

Use the beginPath() to start drawing a new path.

graph.beginPath(); 1 graph . beginPath ( ) ;

We use the JSON.parse() method to parse a string as JSON .

var jsonData = JSON.parse(NewLines); 1 var jsonData = JSON . parse ( NewLines ) ;

Draw lines from the array loop.

for (var i = 0; i < jsonData.counters.length; i++) { var counter = jsonData.counters[i]; graph.lineTo(counter.x, counter.y); } 1 2 3 4 for ( var i = 0 ; i < jsonData . counters . length ; i ++ ) { var counter = jsonData . counters [ i ] ; graph . lineTo ( counter . x , counter . y ) ; }

Fill the stroke.

graph.stroke(); 1 graph . stroke ( ) ;

Line joint color.

graph.fillStyle = "#666"; 1 graph . fillStyle = "#666" ;

Draw circles from array loop.

for (var i = 0; i < jsonData.counters.length; i++) { graph.beginPath(); var axis = jsonData.counters[i]; graph.arc(axis.x, axis.y, 5, 0, Math.PI * 2, true); graph.closePath(); graph.fill(); } 1 2 3 4 5 6 7 for ( var i = 0 ; i < jsonData . counters . length ; i ++ ) { graph . beginPath ( ) ; var axis = jsonData . counters [ i ] ; graph . arc ( axis . x , axis . y , 5 , 0 , Math . PI * 2 , true ) ; graph . closePath ( ) ; graph . fill ( ) ; }

Load the image into memory.

img.src = "graph-images/rrpowered-graph"; 1 img . src = "graph-images/rrpowered-graph" ;

function NewGraph() { var graph = document.getElementById("graph").getContext("2d"); var NewLines = '{"success": true,"counters": [{"x": 5,"y": 150},{"x": 46,"y": 130},{"x": 85,"y": 133},{"x": 124,"y": 145},{"x": 163,"y": 115},{"x": 202,"y": 110},{"x": 241,"y": 102},{"x": 280,"y": 106},{"x": 319,"y": 150},{"x": 358,"y": 118},{"x": 397,"y": 98},{"x": 436,"y": 106},{"x": 475,"y": 148},{"x": 514,"y": 144},{"x": 553,"y": 134},{"x": 592,"y": 102},{"x": 631,"y": 30},{"x": 670,"y": 145},{"x": 709,"y": 135},{"x": 748,"y": 130},{"x": 787,"y": 150},{"x": 826,"y": 150},{"x": 865,"y": 110},{"x": 904,"y": 90},{"x": 943,"y": 30},{"x": 982,"y": 30},{"x": 1021,"y": 60},{"x": 1060,"y": 33}]}'; var img = new Image(); img.onload = function() { graph.drawImage(img, 0, 0); graph.lineWidth = 4; graph.lineJoin = "round"; graph.strokeStyle = "#666"; /*drawpath*/ graph.beginPath(); /*draw line from array loop*/ var jsonData = JSON.parse(NewLines); for (var i = 0; i < jsonData.counters.length; i++) { var counter = jsonData.counters[i]; graph.lineTo(counter.x, counter.y); } graph.stroke(); /*Draw circles*/ graph.fillStyle = "#666"; /*draw round from array loop*/ for (var i = 0; i < jsonData.counters.length; i++) { graph.beginPath(); var axis = jsonData.counters[i]; graph.arc(axis.x, axis.y, 5, 0, Math.PI * 2, true); graph.closePath(); graph.fill(); } } /*The image path*/ img.src = "graph-images/rrpowered-graph"; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 function NewGraph ( ) { var graph = document . getElementById ( "graph" ) . getContext ( "2d" ) ; var NewLines = '{"success": true,"counters": [{"x": 5,"y": 150},{"x": 46,"y": 130},{"x": 85,"y": 133},{"x": 124,"y": 145},{"x": 163,"y": 115},{"x": 202,"y": 110},{"x": 241,"y": 102},{"x": 280,"y": 106},{"x": 319,"y": 150},{"x": 358,"y": 118},{"x": 397,"y": 98},{"x": 436,"y": 106},{"x": 475,"y": 148},{"x": 514,"y": 144},{"x": 553,"y": 134},{"x": 592,"y": 102},{"x": 631,"y": 30},{"x": 670,"y": 145},{"x": 709,"y": 135},{"x": 748,"y": 130},{"x": 787,"y": 150},{"x": 826,"y": 150},{"x": 865,"y": 110},{"x": 904,"y": 90},{"x": 943,"y": 30},{"x": 982,"y": 30},{"x": 1021,"y": 60},{"x": 1060,"y": 33}]}' ; var img = new Image ( ) ; img . onload = function ( ) { graph . drawImage ( img , 0 , 0 ) ; graph . lineWidth = 4 ; graph . lineJoin = "round" ; graph . strokeStyle = "#666" ; /*drawpath*/ graph . beginPath ( ) ; /*draw line from array loop*/ var jsonData = JSON . parse ( NewLines ) ; for ( var i = 0 ; i < jsonData . counters . length ; i ++ ) { var counter = jsonData . counters [ i ] ; graph . lineTo ( counter . x , counter . y ) ; } graph . stroke ( ) ; /*Draw circles*/ graph . fillStyle = "#666" ; /*draw round from array loop*/ for ( var i = 0 ; i < jsonData . counters . length ; i ++ ) { graph . beginPath ( ) ; var axis = jsonData . counters [ i ] ; graph . arc ( axis . x , axis . y , 5 , 0 , Math . PI * 2 , true ) ; graph . closePath ( ) ; graph . fill ( ) ; } } /*The image path*/ img . src = "graph-images/rrpowered-graph" ; }

Conclusion