Static Sparkline Example

This static example page shows how simple sparklines can be created using only html and css. Sparklines are small graphic images which provide a quick description of some underlying data, often something that varies over time. Their small size allows many sparklines to be stacked. In this example the sparkline shows the load of a unix server over time.

The HTML for the example page is listed below. The sparkline and the points in it are represented by <div> tags with a class of "sparkline" (the graph), "sparkred" (red points on the graph) and "sparkgreen" (green points on the graph). When the average load rises above 1 we'll represent it as a red point on the graph, otherwise we'll use a green point.

sparkline.html
<html>
	<head>
        	<Title>Sparkline Demo</Title>
		<link rel="stylesheet" href="sparkline.css" type="text/css" />
    	</head>
    <body>
       <table><tr>
		<td>snark</td>
		<td><img src="images/scale.png"></img></td>
		<td>
           		<div class="sparkline">&nbsp;
				<div class="sparkgreen" style="top:21px; left:0px;"> </div>
				<div class="sparkgreen" style="top:23px; left:3px;"> </div>
				<div class="sparkgreen" style="top:19px; left:6px;"> </div>
				<div class="sparkred" style="top:14px; left:9px;"> </div>
				<div class="sparkred" style="top:13px; left:12px;"> </div>
				<div class="sparkred" style="top:11px; left:15px;"> </div>
				<div class="sparkred" style="top:13px; left:18px;"> </div>
				<div class="sparkred" style="top:8px; left:21px;"> </div>
				<div class="sparkred" style="top:6px; left:24px;"> </div>
				<div class="sparkred" style="top:4px; left:27px;"> </div>
				<div class="sparkred" style="top:0px; left:30px;"> </div>
				<div class="sparkred" style="top:1px; left:33px;"> </div>
				<div class="sparkred" style="top:10px; left:36px;"> </div>
				<div class="sparkred" style="top:14px; left:39px;"> </div>
				<div class="sparkgreen" style="top:17px; left:42px;"> </div>
				<div class="sparkgreen" style="top:20px; left:45px;"> </div>
				<div class="sparkgreen" style="top:21px; left:48px;"> </div>
				<div class="sparkgreen" style="top:23px; left:51px;"> </div>
				<div class="sparkgreen" style="top:22px; left:54px;"> </div>
				<div class="sparkgreen" style="top:24px; left:57px;"> </div>
				<div class="sparkgreen" style="top:27px; left:60px;"> </div>
				<div class="sparkgreen" style="top:28px; left:63px;"> </div>
				<div class="sparkgreen" style="top:31px; left:66px;"> </div>
				<div class="sparkgreen" style="top:32px; left:69px;"> </div>
				<div class="sparkgreen" style="top:31px; left:72px;"> </div>
				<div class="sparkgreen" style="top:29px; left:75px;"> </div>
				<div class="sparkgreen" style="top:26px; left:78px;"> </div>
				<div class="sparkgreen" style="top:27px; left:81px;"> </div>
				<div class="sparkgreen" style="top:22px; left:84px;"> </div>
				<div class="sparkgreen" style="top:23px; left:87px;"> </div>
				<div class="sparkgreen" style="top:24px; left:90px;"> </div>
	        	</div>
            	</td>
		<td>0.45</td>
	</tr></table>
    </body>
</html>
                                

The CSS code (referenced in sparkline.css) is listed below:

sparkline.css
/* stylesheet for sparklines */
 
/* sparkline graph is 90 pixels wide, 32 pixels high */

.sparkline {
    position: relative;
    display: block;
    height:32px;
    width:90px;
    overflow:hidden;
    background:#F0F0F0;
}

/* sparkline point is 3 pixels square, coloured red or green */

.sparkred {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #FF0000;
    overflow:hidden;
}

.sparkgreen {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #00FF00;
    overflow:hidden;
}

The same ideas can be used to implement dynamic sparklines


 

Leave a comment

Anti-Spam Check
Comment