CSS-based sparklines v1.0

This is my first try to sparklines without images using only CSS/XHTML. The example illustrates an hypothetical medical report for readings of glucose in blod.

The glucose of patien X is normal. Please, check a sparkline with the last 50 readings and current levels

Glu 80.2

                 . Normal values of glucose in blod are within the dashed red and green lines.

The sparkline contains five types of blocks (or divs). One for regular points, one for maximal point, one for minial point, one for current point, and finally one for the normal levels. The position of a point has a resolution of a pixel and may be positioned by using the CSS position property in conjunction with left and top. See example:

id="point" style="top: 5px; left:47px;"

Style, layout and resolution of the sparkline can be easily changed by modifying the CSS :

#graph {
position: absolute;
display: inline;
margin-top: 2px;
}

#average {
position: absolute;
width: 100%;
border-top: 1px dotted #F79F9F;
border-bottom: 1px dotted #7AD47A;
overflow; hidden;
}

#point {
position: absolute;
width: 1px;
height: 1px;
background: #878B86;
overflow; hidden;
}

#max {
position: absolute;
width: 1px;
height: 1px;
background: #8B0F0B;
overflow; hidden;
}

#min {
position: absolute;
width: 1px;
height: 1px;
background: #008B1A;
overflow; hidden;
}

#current {
position: absolute;
width: 1px;
height: 1px;
background: #091BA5;
overflow; hidden;
}