HTML: How to create bar charts with tables
In this post I will explain a very - very! - simple method to create vertical or horizontal bar charts using only HTML. You already know that on the web you can find many different solutions to create charts. In October, I posted a list of jQuery plugins and I know there are other JavaScript snippets or Flash stuff available to draw graphs. However I've always found hard to apply those solutions to my needs. That is because I wanted to use data from a database, while many of the available snippets get the data from txt or xml files.
In our example, we will have months as values for the x-axis and numeric data for the y-axis.
Remember that the above table is just an example, applying the html bar charts to other data is very simple, after understanding the logic behind the code.
Our frame will be something like this:
What do we need?
In order to create my simple bar chart, we need to gather data from our database. I won't explain how to do it, because that is not the main topic here. It really doesn't matter how you get your data, but, in order to explain the solution, I assume that you have data such as: | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
| 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 |
In our example, we will have months as values for the x-axis and numeric data for the y-axis.
Remember that the above table is just an example, applying the html bar charts to other data is very simple, after understanding the logic behind the code.
Create the chart
Now that we have the data, we need to create a table that will represent the frame of our chart. We are going to generate a vertical bar chart.Our frame will be something like this:
100
Please notice that inside the main table, we've created another table. I know it is confusing, but believe me you need to do it in order to keep things working. Inside the second table we are going to put another table which has:
- an height value equal to the data value for the month from our database. I increased that value (in the example *3) because I needed it to be more visible. Keep that increasing factor constant in your page, if you change it;
- a border colour and - important! - a background colour. Those attributes will determine the colour of your bar.
Here is the code:
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
Then, we close the containing table and start again with a new column.
...and so on. We have to repeat the process 12 times (for each month).
The above code will create a table containing all the data. The main table contains other tables each containing the table we actually use to draw the bars. The final result is:
100
" border="0" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
" border="1" align="center" bordercolor="#FF0000" bgcolor="#CCCCFF">
90
80
70
60
50
40
30
20
10
0
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
The final effect will be:
100
90 80 70 60 50 40 30 20 10 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
What about horizontal bars?If you want to create horizontal bar charts, you have to consider the width attribute instead of the height attribute of your table.
This is the code as an example:
|0
|10
|20
|30
|40
|50
|60
|70
|80
|90
|100
And the result will be:
|0 |10 |20 |30 |40 |50 |60 |70 |80 |90 |100
ConclusionI believe that the above examples can be a good solution for simple bar charts. It is just a starting point. For instance, you can apply jQuery effects to your bars in order to make them fade in or you can use css to create particular background colours for the bars. Your imagination will then be the only limit.
Happy coding, and please add your thoughts to the comment section.