Grafico de barras

Estilos utilizados

.fondodiv {
	position: relative;
	border-style: ridge;
	border-width: 1px;
	font-size: 10px;
	font-weight: bold;
	vertical-align: bottom;
	text-align: center;
}
.lila {
	position: absolute;
	background-color: #CC99FF;
	border-color: #CC99FF;
	color: white;
	width: 75px;
	vertical-align: middle;
}
.azul {
	position: absolute;
	color: white;
	background-color: #4444FF;
	border-color: #4444FF;
	width: 75px;
	vertical-align: middle;
}
.pequeno {
  font-size: 8px;
	font-style: italic;
}

Código JavaScript

var ancho=48;
var ano=new Array("1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005");
var Datos=new Array(1131, 1763, 2927, 4917, 5992, 7055, 8825, 9614, 8077, 7780, 7947, 4128);
var Fecha=new Date(2005,10,20);		// LOS MESES EMPIEZAN DESDE 0 =< HAY QUE PONER EL MES ACTUAL MENOS 1
var F_Escala=25;

function Rellena_Ceros(cadena,N)  // Funcion que antepone ceros a una cadena hasta alcazar
{                                 // una longitud N. Si N es menor que la longitud, no pone ninguno.
var k=0;
var resultado=cadena.toString();
for (k=resultado.length; k<N; k++)
		resultado="0" + resultado.toString();
return resultado;
}

function Puntua(valor)        //Funcion que pone el punto separador de los millares, etc.
{
var i=0;
var resultado=Rellena_Ceros((valor%1000),3);
var resultado=valor%1000;
var tmp=parseInt(valor/1000);
while (tmp>0)
	{
	resultado=Rellena_Ceros((tmp%1000),3) + "." + resultado;
	tmp=parseInt(tmp/1000);
	}
while (resultado.charAt(0)=="0")			// Quitar los 0 iniciales
	resultado=resultado.substring(1,resultado.length);
return resultado;
}

function Representa()          // Funcion que representa el grafico excepto la prevision
{
var i=0;
var contenido;
window.document.getElementById("fondo").style.width=ano.length*(ancho+5)+20;
window.document.getElementById("fondo").style.background= "#FFFFCC";
window.document.getElementById("fecha").innerHTML="Datos en miles a fecha: " + Fecha.getDate() + "/" +
			(Fecha.getMonth()+1) + "/" + Fecha.getFullYear();
for (i=0; i<ano.length; i++)
	{
	posicion=(i*(ancho+5))+10;
	altura=Datos[i]/F_Escala;
	valor=Puntua(Datos[i]);
	contenido=window.document.getElementById("fondo").innerHTML;
	window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'azul\' id=\'" + ano[i].toString() + 
			"\' style=\'z-index: 1; bottom: 30px;\' title=\'" + valor + "\'>" + Datos[i] + "</div>";
	window.document.getElementById(ano[i]).style.bottom=30;
	window.document.getElementById(ano[i]).style.left=posicion;
	window.document.getElementById(ano[i]).style.height=altura;
	window.document.getElementById(ano[i]).style.width=ancho;
	contenido=window.document.getElementById("fondo").innerHTML;
	window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom: 15px; left: " +
		 (posicion+10) + "px;\'>" + ano[i] + "</span>"
		}
Prevision(i-1);		 // Representar la prevision en función de los datos del ultimo año
}

function Prevision(V)
{
var contenido;
Origen = new Date(Fecha.getFullYear(),0,1);			// Primer dia del año
Final = new Date(Fecha.getFullYear(),11,31);			// Ultimo dia del año
N_Dias=1+(Final.valueOf()-Origen.valueOf())/86400000;		// Dias totales del año, por si es bisiesto
Dias=1+(Fecha.valueOf()-Origen.valueOf())/86400000;		// Dia Juliano de la fecha de actualizacion de los datos
Diario=Math.round(Datos[V]/Dias);				// Respuestas medias por dia
Estimado=Diario*N_Dias;						// Respuestas estimadas
posicion=(V*(ancho+5))+10;					// dimensiones, posicion y texto a poner en la barra grafica
altura=Estimado/F_Escala;
valor=Puntua(Estimado);
contenido=window.document.getElementById("fondo").innerHTML;
window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'lila\' id=\'Previsto\' style=\'z-index: 0; bottom: 30px;\' title=\'Respuestas Previstas " + 
				valor + "\'></div>";
window.document.getElementById("Previsto").style.bottom=30;
window.document.getElementById("Previsto").style.left=posicion;
window.document.getElementById("Previsto").style.height=altura;
window.document.getElementById("Previsto").style.width=ancho;
contenido=window.document.getElementById("fondo").innerHTML;
window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom:" + 
				(altura+40) +"; left: " + posicion + "px;\'> Previsto<br>" + Estimado + "</span>"
}

<table>
<tr><td><h3>Titulo del Gráfico</h3>
	<p align=center id="fecha"></p></td></tr>
<tr><td>
<div id="fondo" style="top: 10px; left: 10px; height: 600px;" class="fondodiv">
<h3>Valores del Gráfico</h3>
</div>
</td></tr>
<tr><td class="pequeno"><br><b>Nota:</b> Las datos previstos se calculan en función de los datos medios del 
año hasta la fecha de actualización.</td></tr>
</table>