Create an HTML5 canvas graph with javascript.
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.
1 | <body onLoad="NewGraph();"></body> |
We use the element to draw the image to.
1 | <canvas id="graph"width="1075"height="175"></canvas> |
The whole HTML5 markup below:
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().
1 | functionNewGraph() |
First, find the 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.
1 | vargraph=document.getElementById("graph").getContext("2d"); |
We will store the line values in an array() for the x and y values on canvas.
1 | varNewLines='"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.
1 | varimg=newImage(); |
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.
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.
1 | graph.drawImage(img,0,0); |
Line stroke width.
1 | graph.lineWidth=4; |
Line joint shape.
1 | graph.lineJoin="round"; |
Line stroke color.
1 | graph.strokeStyle="#666"; |
Use the beginPath() to start drawing a new path.
1 | graph.beginPath(); |
We use the JSON.parse() method to parse a string as JSON.
1 | varjsonData=JSON.parse(NewLines); |
Draw lines from the array loop.
1 2 3 4 | for(vari=0;i<jsonData.counters.length;i++) varcounter=jsonData.counters[i]; graph.lineTo(counter.x,counter.y); |
Fill the stroke.
1 | graph.stroke(); |
Line joint color.
1 | graph.fillStyle="#666"; |
Draw circles from array loop.
1 2 3 4 5 6 7 | for(vari=0;i<jsonData.counters.length;i++) graph.beginPath(); varaxis=jsonData.counters[i]; graph.arc(axis.x,axis.y,5,0,Math.PI *2,true); graph.closePath(); graph.fill(); |
Load the image into memory.
1 | img.src="graph-images/rrpowered-graph"; |
The whole Javascript
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 | functionNewGraph() vargraph=document.getElementById("graph").getContext("2d"); varNewLines='"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]'; varimg=newImage(); 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*/ varjsonData=JSON.parse(NewLines); for(vari=0;i<jsonData.counters.length;i++) varcounter=jsonData.counters[i]; graph.lineTo(counter.x,counter.y); graph.stroke(); /*Draw circles*/ graph.fillStyle="#666"; /*draw round from array loop*/ for(vari=0;i<jsonData.counters.length;i++) graph.beginPath(); varaxis=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"; Link Demo : http://www.rrpowered.com/Tutorials/HTML5Graph/ Link Download : http://www.rrpowered.com/code/RRPowered-HTML5Graph.zip |
No comments:
Post a Comment