Table Of Contents<\/h3>\n\n- 1. The canvas element<\/a><\/dt>\n
- 2. Drawing (more complex) graphics<\/a><\/dt>\n
- 3. Chart.js<\/a><\/dt>\n
- 3.1. Line chart<\/a><\/dd>\n
- 3.2. Bar chart<\/a><\/dd>\n
- 3.3. Pie chart<\/a><\/dd>\n
- 4. Summary<\/a><\/dt>\n
- 5. Download the source code<\/a><\/dt>\n<\/dl>\n<\/div>\n
1. The canvas element<\/h2>\n
The canvas element was one of the most expected novelties of HTML5. This element allows us to draw dynamically images in a webpage, usually done with JavaScript in combination with the canvas API.<\/p>\n
As said, the element we have to use is canvas<\/code>. So, something like the following would be enough to start:<\/p>\ncanvas.html<\/em><\/span><\/p>\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Graph - Canvas<\/title>\r\n <script src=\"canvas.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 80%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n #canvas {\r\n border: 1px solid black;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>HTML5 Canvas<\/h1>\r\n <canvas id=\"canvas\" width=\"400\" height=\"400\"><\/canvas>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nThis will render a white canvas in the browser of 400×400\u00a0(with the black border set with the CSS). Nothing very exciting.<\/p>\n
But, now that we have our canvas, we can\u00a0draw<\/strong> on it. Let\u2019s see how to draw\u00a0a line to see the most elemental canvas functions.<\/p>\ncanvas.js<\/span><\/em><\/p>\ndocument.addEventListener('DOMContentLoaded', function(event) {\r\n var canvas = document.getElementById('canvas'),\r\n context = canvas.getContext('2d');\r\n\r\n context.beginPath();\r\n context.moveTo(0, 0);\r\n context.lineTo(400, 400);\r\n context.strokeStyle = '#7142f4';\r\n context.stroke();\r\n});\r\n<\/pre>\nThe first thing we do is to bind the piece of code that manipulates the canvas to the DOMContentLoaded<\/code> listener, since we have to be sure that the elements are loaded before we access them.<\/p>\nThen, we get the canvas object from the DOM. But, for drawing on it, we need to get the render context of the canvas, the 2D context. This context offers the method for drawing in the canvas.<\/p>\n
For drawing a line, the first thing we do is calling beginPath()<\/code> method. This is for telling to the canvas that, effectively, what we are going to do is to draw a path (line).<\/p>\nThen, we have to set the beginning of the path in the coordinate system, with moveTo()<\/code> method. We have to take into account that, in the pixel coordinate system, the (0, 0) is placed in the top-left corner, that is, the Y axis is inverted in regard to the cartesian coordinate system. So, the path will begin in the top-left corner of the canvas.<\/p>\nWe can also set the style of the line, assigning a color to the strokeStyle<\/code> property of the context object. The default color is black.<\/p>\nFinally, to draw the line for the defined path, we have to call the stroke()<\/code> method. This is what we would see in the browser:<\/p>\n![\"1.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/canvas_path.jpg\")
1. Drawing a line on a canvas.<\/figcaption><\/figure>\n2. Drawing (more complex) graphics<\/h2>\n
Actually, we can consider a graphic what we have done above. But let’s see a more thorough example.<\/p>\n
Let’s suppose that we want to want to show a graphic of the world’s population growth, per continent. We can use the following dataset for this:<\/p>\n
\n\u00a0<\/caption>\n \n\nContinent<\/strong><\/th>\n1700<\/strong><\/th>\n1750<\/strong><\/th>\n1800<\/strong><\/th>\n1850<\/strong><\/th>\n1900<\/strong><\/th>\n1950<\/strong><\/th>\n2000<\/strong><\/th>\n2050<\/strong><\/th>\n<\/tr>\n<\/thead>\n\n\nAfrica<\/td>\n 106<\/td>\n 106<\/td>\n 107<\/td>\n 111<\/td>\n 133<\/td>\n 221<\/td>\n 783<\/td>\n 2478<\/td>\n<\/tr>\n \nAmerica<\/td>\n 12<\/td>\n 18<\/td>\n 31<\/td>\n 64<\/td>\n 156<\/td>\n 339<\/td>\n 820<\/td>\n 1217<\/td>\n<\/tr>\n \nAsia<\/td>\n 441<\/td>\n 502<\/td>\n 635<\/td>\n 809<\/td>\n 947<\/td>\n 1402<\/td>\n 3700<\/td>\n 5267<\/td>\n<\/tr>\n \nEurope<\/td>\n 178<\/td>\n 190<\/td>\n 203<\/td>\n 276<\/td>\n 408<\/td>\n 547<\/td>\n 675<\/td>\n 734<\/td>\n<\/tr>\n \nOceania<\/td>\n 3<\/td>\n 2<\/td>\n 2<\/td>\n 2<\/td>\n 6<\/td>\n 13<\/td>\n 30<\/td>\n 57<\/td>\n<\/tr>\n \nWorld<\/td>\n 710<\/td>\n 791<\/td>\n 978<\/td>\n 1262<\/td>\n 1650<\/td>\n 2521<\/td>\n 6008<\/td>\n 9725<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n(Souce: Wikipedia)<\/p>\n
Note: the values for the year 2050 are, obviously, an estimation. But this is not important for our purposes.<\/p>\n
For this, we will use almost the same HTML base:<\/p>\n
canvas_population.html<\/span><\/em><\/p>\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Graph - Canvas<\/title>\r\n <script src=\"canvas.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 80%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>World population growth<\/h1>\r\n <canvas id=\"canvas\" height=\"400\" width=\"650\"><\/canvas>\r\n <\/div>\r\n<\/body>\r\n<\/html><\/pre>\nThe JavaScript would be the following:<\/p>\n
canvas_population.js<\/span><\/em><\/p>\nvar populationGrowth = {\r\n 'africa' : [106, 106, 107, 111, 133, 221, 783, 2478],\r\n 'america': [12, 18, 31, 64, 156, 339, 820, 1217],\r\n 'asia' : [411, 502, 635, 809, 947, 1402, 3700, 5267],\r\n 'europe' : [178, 190, 203, 276, 408, 547, 675, 734],\r\n 'oceania': [3, 2, 2, 2, 6, 13, 30, 57],\r\n 'world' : [710, 791, 978, 1262, 1650, 2521, 6008, 9725]\r\n};\r\n\r\nvar xScale = 50;\r\n\r\nfunction initCanvas() {\r\n var canvas = document.getElementById('canvas'),\r\n context = canvas.getContext(\"2d\");\r\n\r\n context.strokeColor = '#7142f4';\r\n\r\n return context;\r\n}\r\n\r\nfunction plotDataset(context, dataSet) {\r\n var canvasHeight = context.canvas.height;\r\n\r\n context.beginPath();\r\n context.moveTo(0, dataSet[0]);\r\n\r\n for (var populationIndex = 0; populationIndex < dataSet.length; populationIndex++) {\r\n var population = dataSet[populationIndex],\r\n xCoordinate = populationIndex * xScale,\r\n yCoordinate = canvasHeight - population;\r\n\r\n context.lineTo(xCoordinate, yCoordinate);\r\n }\r\n\r\n context.stroke();\r\n}\r\n\r\nfunction draw(context, dataSet) {\r\n for (var continent in dataSet) {\r\n var population = dataSet[continent];\r\n\r\n plotDataset(context, population);\r\n }\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function(event) {\r\n var context = initCanvas();\r\n\r\n draw(context, populationGrowth);\r\n});\r\n<\/pre>\nLet’s examine the code:<\/p>\n
The first thing we do is to define an object with our data. Nothing very special.<\/p>\n
Then, we define, in line 10, a scaling value for the X axis. This is for defining the “distance” between each value in the X axis. As you can see, this is a complete arbitrary value. We will leave as it is for the moment.<\/p>\n
The function for initializing the canvas doesn’t do anything we don’t know already.<\/p>\n
The one for plotting the dataset (the dataset will be the array of values for each continent) is the most interesting one. Note that the first thing we do is to save the height of the canvas. After beginning the path and moving the initial point (which is the (0, <first-value>)) for the dataset in question, we start looping each value of the dataset. For the X coordinate, we multiply the value itself with the scaling value, as explained above. And, for the Y coordinate, we have to “invert” the actual value because, remember, the Y axis in the pixel coordinate system goes “top-down”. To display the actual value in the system, we just have to subtract the value in question to the canvas height.<\/p>\n
The last function is just for iterating the object with the datasets and calling to the method described in the paragraph above.<\/p>\n
Finally, when the DOM is loaded, we just init the context, and draw the data.<\/p>\n
The result will be the following:<\/p>\n![\"2.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/canvas_population_growth.jpg\")
2. Displaying datasets on a canvas.<\/figcaption><\/figure>\nPerhaps results quite disappointing. Apart from the frankly improvable style, not even all the datasets are displayed. And, for those being displayed, not all the data is shown.<\/p>\n
Instead of investing our time and efforts in drawing ugly charts, we will see how to draw stunning charts with a JavaScript library.<\/p>\n
3. Chart.js<\/h2>\n
We have already seen how to draw a graphic natively, defining several datasets and building our own functions to draw the data in the canvas. But the functions we have coded are just applicable for a specific kind of graphic, a line chart. At the moment we would need to display another kind of graphic, we would have to build the functions from the scratch.<\/p>\n
Fortunately, there’s available a library for drawing beautiful charts, with a very huge variety, named Chart.js. In this section, we will see how to draw several types of graphics with this library.<\/p>\n
1. The canvas element<\/h2>\n
The canvas element was one of the most expected novelties of HTML5. This element allows us to draw dynamically images in a webpage, usually done with JavaScript in combination with the canvas API.<\/p>\n
As said, the element we have to use is canvas.html<\/em><\/span><\/p>\n This will render a white canvas in the browser of 400×400\u00a0(with the black border set with the CSS). Nothing very exciting.<\/p>\n But, now that we have our canvas, we can\u00a0draw<\/strong> on it. Let\u2019s see how to draw\u00a0a line to see the most elemental canvas functions.<\/p>\n canvas.js<\/span><\/em><\/p>\n The first thing we do is to bind the piece of code that manipulates the canvas to the Then, we get the canvas object from the DOM. But, for drawing on it, we need to get the render context of the canvas, the 2D context. This context offers the method for drawing in the canvas.<\/p>\n For drawing a line, the first thing we do is calling Then, we have to set the beginning of the path in the coordinate system, with We can also set the style of the line, assigning a color to the Finally, to draw the line for the defined path, we have to call the Actually, we can consider a graphic what we have done above. But let’s see a more thorough example.<\/p>\n Let’s suppose that we want to want to show a graphic of the world’s population growth, per continent. We can use the following dataset for this:<\/p>\n (Souce: Wikipedia)<\/p>\n Note: the values for the year 2050 are, obviously, an estimation. But this is not important for our purposes.<\/p>\n For this, we will use almost the same HTML base:<\/p>\n canvas_population.html<\/span><\/em><\/p>\n The JavaScript would be the following:<\/p>\n canvas_population.js<\/span><\/em><\/p>\n Let’s examine the code:<\/p>\n The first thing we do is to define an object with our data. Nothing very special.<\/p>\n Then, we define, in line 10, a scaling value for the X axis. This is for defining the “distance” between each value in the X axis. As you can see, this is a complete arbitrary value. We will leave as it is for the moment.<\/p>\n The function for initializing the canvas doesn’t do anything we don’t know already.<\/p>\n The one for plotting the dataset (the dataset will be the array of values for each continent) is the most interesting one. Note that the first thing we do is to save the height of the canvas. After beginning the path and moving the initial point (which is the (0, <first-value>)) for the dataset in question, we start looping each value of the dataset. For the X coordinate, we multiply the value itself with the scaling value, as explained above. And, for the Y coordinate, we have to “invert” the actual value because, remember, the Y axis in the pixel coordinate system goes “top-down”. To display the actual value in the system, we just have to subtract the value in question to the canvas height.<\/p>\n The last function is just for iterating the object with the datasets and calling to the method described in the paragraph above.<\/p>\n Finally, when the DOM is loaded, we just init the context, and draw the data.<\/p>\n The result will be the following:<\/p>\n Perhaps results quite disappointing. Apart from the frankly improvable style, not even all the datasets are displayed. And, for those being displayed, not all the data is shown.<\/p>\n Instead of investing our time and efforts in drawing ugly charts, we will see how to draw stunning charts with a JavaScript library.<\/p>\n We have already seen how to draw a graphic natively, defining several datasets and building our own functions to draw the data in the canvas. But the functions we have coded are just applicable for a specific kind of graphic, a line chart. At the moment we would need to display another kind of graphic, we would have to build the functions from the scratch.<\/p>\n Fortunately, there’s available a library for drawing beautiful charts, with a very huge variety, named Chart.js. In this section, we will see how to draw several types of graphics with this library.<\/p>\ncanvas<\/code>. So, something like the following would be enough to start:<\/p>\n<html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Graph - Canvas<\/title>\r\n <script src=\"canvas.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 80%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n #canvas {\r\n border: 1px solid black;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>HTML5 Canvas<\/h1>\r\n <canvas id=\"canvas\" width=\"400\" height=\"400\"><\/canvas>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\ndocument.addEventListener('DOMContentLoaded', function(event) {\r\n var canvas = document.getElementById('canvas'),\r\n context = canvas.getContext('2d');\r\n\r\n context.beginPath();\r\n context.moveTo(0, 0);\r\n context.lineTo(400, 400);\r\n context.strokeStyle = '#7142f4';\r\n context.stroke();\r\n});\r\n<\/pre>\nDOMContentLoaded<\/code> listener, since we have to be sure that the elements are loaded before we access them.<\/p>\nbeginPath()<\/code> method. This is for telling to the canvas that, effectively, what we are going to do is to draw a path (line).<\/p>\nmoveTo()<\/code> method. We have to take into account that, in the pixel coordinate system, the (0, 0) is placed in the top-left corner, that is, the Y axis is inverted in regard to the cartesian coordinate system. So, the path will begin in the top-left corner of the canvas.<\/p>\nstrokeStyle<\/code> property of the context object. The default color is black.<\/p>\nstroke()<\/code> method. This is what we would see in the browser:<\/p>\n2. Drawing (more complex) graphics<\/h2>\n
\n
\n Continent<\/strong><\/th>\n 1700<\/strong><\/th>\n 1750<\/strong><\/th>\n 1800<\/strong><\/th>\n 1850<\/strong><\/th>\n 1900<\/strong><\/th>\n 1950<\/strong><\/th>\n 2000<\/strong><\/th>\n 2050<\/strong><\/th>\n<\/tr>\n<\/thead>\n\n \n Africa<\/td>\n 106<\/td>\n 106<\/td>\n 107<\/td>\n 111<\/td>\n 133<\/td>\n 221<\/td>\n 783<\/td>\n 2478<\/td>\n<\/tr>\n \n America<\/td>\n 12<\/td>\n 18<\/td>\n 31<\/td>\n 64<\/td>\n 156<\/td>\n 339<\/td>\n 820<\/td>\n 1217<\/td>\n<\/tr>\n \n Asia<\/td>\n 441<\/td>\n 502<\/td>\n 635<\/td>\n 809<\/td>\n 947<\/td>\n 1402<\/td>\n 3700<\/td>\n 5267<\/td>\n<\/tr>\n \n Europe<\/td>\n 178<\/td>\n 190<\/td>\n 203<\/td>\n 276<\/td>\n 408<\/td>\n 547<\/td>\n 675<\/td>\n 734<\/td>\n<\/tr>\n \n Oceania<\/td>\n 3<\/td>\n 2<\/td>\n 2<\/td>\n 2<\/td>\n 6<\/td>\n 13<\/td>\n 30<\/td>\n 57<\/td>\n<\/tr>\n \n World<\/td>\n 710<\/td>\n 791<\/td>\n 978<\/td>\n 1262<\/td>\n 1650<\/td>\n 2521<\/td>\n 6008<\/td>\n 9725<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <html>\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title>Graph - Canvas<\/title>\r\n <script src=\"canvas.js\"><\/script>\r\n <style>\r\n #wrapper {\r\n width: 80%;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"wrapper\">\r\n <h1>World population growth<\/h1>\r\n <canvas id=\"canvas\" height=\"400\" width=\"650\"><\/canvas>\r\n <\/div>\r\n<\/body>\r\n<\/html><\/pre>\nvar populationGrowth = {\r\n 'africa' : [106, 106, 107, 111, 133, 221, 783, 2478],\r\n 'america': [12, 18, 31, 64, 156, 339, 820, 1217],\r\n 'asia' : [411, 502, 635, 809, 947, 1402, 3700, 5267],\r\n 'europe' : [178, 190, 203, 276, 408, 547, 675, 734],\r\n 'oceania': [3, 2, 2, 2, 6, 13, 30, 57],\r\n 'world' : [710, 791, 978, 1262, 1650, 2521, 6008, 9725]\r\n};\r\n\r\nvar xScale = 50;\r\n\r\nfunction initCanvas() {\r\n var canvas = document.getElementById('canvas'),\r\n context = canvas.getContext(\"2d\");\r\n\r\n context.strokeColor = '#7142f4';\r\n\r\n return context;\r\n}\r\n\r\nfunction plotDataset(context, dataSet) {\r\n var canvasHeight = context.canvas.height;\r\n\r\n context.beginPath();\r\n context.moveTo(0, dataSet[0]);\r\n\r\n for (var populationIndex = 0; populationIndex < dataSet.length; populationIndex++) {\r\n var population = dataSet[populationIndex],\r\n xCoordinate = populationIndex * xScale,\r\n yCoordinate = canvasHeight - population;\r\n\r\n context.lineTo(xCoordinate, yCoordinate);\r\n }\r\n\r\n context.stroke();\r\n}\r\n\r\nfunction draw(context, dataSet) {\r\n for (var continent in dataSet) {\r\n var population = dataSet[continent];\r\n\r\n plotDataset(context, population);\r\n }\r\n}\r\n\r\ndocument.addEventListener('DOMContentLoaded', function(event) {\r\n var context = initCanvas();\r\n\r\n draw(context, populationGrowth);\r\n});\r\n<\/pre>\n3. Chart.js<\/h2>\n
![\"3.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/chartjs_line.jpg\")
![\"4.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/chartjs_line_labels.jpg\")
![\"5.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/bar2.jpg\")
![\"6.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/04\/pie.jpg\")