It is a very common need to create charts to show in web pages. There are, of course, several tools you can use. I sometimes rather create the chart myself and keep control of every detail and fix eventual bugs.

Let's learn how to create a very simple HTML with a chart with the following steps:

The chart will not include any image nor javascript. To understand this tutorial you do not need to know any programming language. Of course if you do and are willing to use such resources you could make the chart much better. Nevertheless for you to create automated charts you'll benefit from knowing how to build them using HTML/CSS anyway.

If you have an HTML file this is of course unnecessary (or if you already have a program generating it). If you don't have it, create it using a text editor. You can use Gedit (under Gnome), Kate (under KDE) or Bluefish (under Windows) or, better yet Vim or Emacs if you are willing to use advanced and powerful tools.

Create a new file and type the following:

 
  
 
 
  

Chart example with HTML and CSS

 

  

   



NY


   



Boston


   



LA


   



Houston


   



Washington

CSS stands for Cascading Style Sheet. It is a language used to create the style of a document, that means: it's looks. It is a rather simple language that can be used to achieve very interesting and even complex looks. It is mostly used to theme texts: making paragraphs and titles look nice, but we'll use it here to create a chart.

You should keep in mind HTML is usually used to create texts and therefore it's rules and definitions are specially good to this need. There are some extra difficulties when we use it to other goals. You will, of course, timely learn to overcome them.

Let's edit the chart.css file, that is called by the chart.html file we just edited. Note that the link we established between them sets only the name of the file, not it's path. This means the computer will assume they are at the same folder.

Let's continue:

We'll set for chart div a width of 450 pixels (450px) and a 300px height. Next we will set a silver thin border and, finally we will make it have an inner margin (padding) of 10px, that means 10px between the content and its border.

We will make each column have a width of 80px and a height equal to the height of the box the bar is in, that means: 100%. When we establish that an element has 100% height we are making it occupy the whole space available to it. As the column is inside a chart div, we are saying it will fill the whole available space inside that div. We will also make it have margins of 2px above and bellow and 5px to the left and right. This way columns there will be a space of 10px between each column.

Now we get to the most sensitive part of our tutorial. The HTML elements may be positioned differently depending on what they are. Texts, for instance, are rendered from left to right, occupying all the available space to the right of the previous text, if it fits. Blocks, on the other hand, are positioned one bellow the other, regardless of any available space to the right of the previous. Our columns are blocks and will be positioned one bellow the other unless we do something about it. We need to tell our columns to float to the left, that means, to behave like text would, so they will open some space to their right for other blocks to fill it.

Note: when an element floats it is as if it had opened up some space for others to fill it and not as if it was trying to fill the space left open by others.

Continuing the most important part: we will now make each column have a relative position to it's parent. The parent element is the element inside which the column is, that is the column-container div is the parent of the column div. It is important to establish that the column has a relative position because it is possible to set absolute positions relatively to the parent relative position. Confusing, isn't it? Let me try to fix it ahead, OK?

The result we'd have now would be a big box with a silver border and several columns inside it, going from the base to the top, but they'd be invisible, as we defined no background color or borders. Notice that the columns will all be the same size and will always cover from base to top. For us to fill each column differently we will create another inner element, which we called fill, to receive the filling color. We will make the fill color with a 100% width and each with a different height. The fill element will be positioned absolutely in the base of the column.

We are now back to the question of the absolute positioning. We want the filling of the column (the visible part of the bar) to stay in the bottom of the chart. We want it always to be, regardless of it's size, in the bottom. We will do this by setting to fill an absolute position. When we do this it gains an absolute position relative to the page and this would place all colors of the chart in the same place, and we would only see the last one. That is why we need to give each element an absolute position to a different reference. It happens the absolute position is actually relative to something, usually the page itself. Thus, an element positioned 20px to the top will be 20px to the top of the page. An element with an absolute position that is place inside an element with a relative position, though, is positioned absolutely to its parent. This is why we set column div to have position relative and to float left. Fill div is position absolute and is 0px from base.

Here is the code:

.chart{
 border: solid thin silver;
 width: 450px;
 height: 300px;
 padding: 10px;
}
.column{
 width: 80px;
 height: 100%;
 margin: 2px 5px;
 float: left;
 position: relative;
}

.column .fill{
 width: 100%;
 position: absolute;
 bottom: 0px;
}
.label{
 text-align: center;
}

Now we need so save the file and proceed to the last part of our chart.

Let's set the colors and the height of each column using a CSS code embedded in the HTML code. The reason we will use thes HTML embedded instead of simply including it in the chart.css file is this: we usually do not writ HTML code directly in the HTML file, instead we write a script that do this for us - this is called dynamic page. CSS files, on the other hand, are not usually "dynamic" and therefore are not created within scripts. So, elements that may change usually go in the HTML files and elements that will not change are placed in CSS files. In our chart colors and height may change with changes in the data. Although our chart is static (written directly in the file) and not dynamic, we may want to make it dynamic someday.

To include an embedded CSS in the HTML we use the tag style. In it we set the color and the height of each column. Let's see the code:

The final result, then will be two files: chart.html and chart.css. Download a zip file with them.

from : http://ndvo.blog.br/