Graficos de Barra Que le falta al codigo

[sychowaves]

Me an pasado Este scrip bastante completo pero al final no comprendo que variables debo colocar en el HTML para que el grafico aparenca aqui les dejo el codigo

Estilos utilizados

Código CSS:

.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

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&#37;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>"
}
 

Código HTML

Código HTML:

<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> 

grafico de barras utilizando estilos y javascript. Las barras en realidad son bloques div, cuya altura se calcula en función de los valores a representar dichos valores el puntoes Como Hago para que se muetren. la muestra la tengo pero perdi parte del codigo

Además se hace uso de una función para formatear las cifras poniendole el punto separador de los millares.

Espero Me puedan ayudar gracias de antemano