Foros del Web » Programando para Internet » Javascript »

Graficos de Barra Que le falta al codigo

 Estas en el tema de Graficos de Barra Que le falta al codigo en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/07/2010, 23:33
Avatar de sychowaves  
Fecha de Ingreso: junio-2010
Ubicación: Caracas - Venezuela
Mensajes: 21
Antigüedad: 14 años, 4 meses
Puntos: 0
Pregunta Graficos de Barra Que le falta al codigo
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: 
Ver original
  1. .fondodiv {
  2.     position: relative;
  3.     border-style: ridge;
  4.     border-width: 1px;
  5.     font-size: 10px;
  6.     font-weight: bold;
  7.     vertical-align: bottom;
  8.     text-align: center;
  9. }
  10. .lila {
  11.     position: absolute;
  12.     background-color: #CC99FF;
  13.     border-color: #CC99FF;
  14.     color: white;
  15.     width: 75px;
  16.     vertical-align: middle;
  17. }
  18. .azul {
  19.     position: absolute;
  20.     color: white;
  21.     background-color: #4444FF;
  22.     border-color: #4444FF;
  23.     width: 75px;
  24.     vertical-align: middle;
  25. }
  26. .pequeno {
  27.   font-size: 8px;
  28.     font-style: italic;
  29. }

Código JavaScript

Código Javascript: 
Ver original
  1. var ancho=48;
  2. var ano=new Array("1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005");
  3. var Datos=new Array(1131, 1763, 2927, 4917, 5992, 7055, 8825, 9614, 8077, 7780, 7947, 4128);
  4. var Fecha=new Date(2005,10,20);     // LOS MESES EMPIEZAN DESDE 0 =< HAY QUE PONER EL MES ACTUAL MENOS 1
  5. var F_Escala=25;
  6.  
  7. function Rellena_Ceros(cadena,N)  // Funcion que antepone ceros a una cadena hasta alcazar
  8. {                                 // una longitud N. Si N es menor que la longitud, no pone ninguno.
  9. var k=0;
  10. var resultado=cadena.toString();
  11. for (k=resultado.length; k<N; k++)
  12.         resultado="0" + resultado.toString();
  13. return resultado;
  14. }
  15.  
  16. function Puntua(valor)        //Funcion que pone el punto separador de los millares, etc.
  17. {
  18. var i=0;
  19. var resultado=Rellena_Ceros((valor&#37;1000),3);
  20. var resultado=valor%1000;
  21. var tmp=parseInt(valor/1000);
  22. while (tmp>0)
  23.     {
  24.     resultado=Rellena_Ceros((tmp%1000),3) + "." + resultado;
  25.     tmp=parseInt(tmp/1000);
  26.     }
  27. while (resultado.charAt(0)=="0")            // Quitar los 0 iniciales
  28.     resultado=resultado.substring(1,resultado.length);
  29. return resultado;
  30. }
  31.  
  32. function Representa()          // Funcion que representa el grafico excepto la prevision
  33. {
  34. var i=0;
  35. var contenido;
  36. window.document.getElementById("fondo").style.width=ano.length*(ancho+5)+20;
  37. window.document.getElementById("fondo").style.background= "#FFFFCC";
  38. window.document.getElementById("fecha").innerHTML="Datos en miles a fecha: " + Fecha.getDate() + "/" +
  39.             (Fecha.getMonth()+1) + "/" + Fecha.getFullYear();
  40. for (i=0; i<ano.length; i++)
  41.     {
  42.     posicion=(i*(ancho+5))+10;
  43.     altura=Datos[i]/F_Escala;
  44.     valor=Puntua(Datos[i]);
  45.     contenido=window.document.getElementById("fondo").innerHTML;
  46.     window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'azul\' id=\'" + ano[i].toString() + 
  47.             "\' style=\'z-index: 1; bottom: 30px;\' title=\'" + valor + "\'>" + Datos[i] + "</div>";
  48.     window.document.getElementById(ano[i]).style.bottom=30;
  49.     window.document.getElementById(ano[i]).style.left=posicion;
  50.     window.document.getElementById(ano[i]).style.height=altura;
  51.     window.document.getElementById(ano[i]).style.width=ancho;
  52.     contenido=window.document.getElementById("fondo").innerHTML;
  53.     window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom: 15px; left: " +
  54.          (posicion+10) + "px;\'>" + ano[i] + "</span>"
  55.         }
  56. Prevision(i-1);      // Representar la prevision en función de los datos del ultimo año
  57. }
  58.  
  59. function Prevision(V)
  60. {
  61. var contenido;
  62. Origen = new Date(Fecha.getFullYear(),0,1);         // Primer dia del año
  63. Final = new Date(Fecha.getFullYear(),11,31);            // Ultimo dia del año
  64. N_Dias=1+(Final.valueOf()-Origen.valueOf())/86400000;       // Dias totales del año, por si es bisiesto
  65. Dias=1+(Fecha.valueOf()-Origen.valueOf())/86400000;     // Dia Juliano de la fecha de actualizacion de los datos
  66. Diario=Math.round(Datos[V]/Dias);               // Respuestas medias por dia
  67. Estimado=Diario*N_Dias;                     // Respuestas estimadas
  68. posicion=(V*(ancho+5))+10;                  // dimensiones, posicion y texto a poner en la barra grafica
  69. altura=Estimado/F_Escala;
  70. valor=Puntua(Estimado);
  71. contenido=window.document.getElementById("fondo").innerHTML;
  72. window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'lila\' id=\'Previsto\' style=\'z-index: 0; bottom: 30px;\' title=\'Respuestas Previstas " + 
  73.                 valor + "\'></div>";
  74. window.document.getElementById("Previsto").style.bottom=30;
  75. window.document.getElementById("Previsto").style.left=posicion;
  76. window.document.getElementById("Previsto").style.height=altura;
  77. window.document.getElementById("Previsto").style.width=ancho;
  78. contenido=window.document.getElementById("fondo").innerHTML;
  79. window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom:" + 
  80.                 (altura+40) +"; left: " + posicion + "px;\'> Previsto<br>" + Estimado + "</span>"
  81. }

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
Última edición por sychowaves; 02/07/2010 a las 00:24
  #2 (permalink)  
Antiguo 02/07/2010, 16:09
Avatar de sychowaves  
Fecha de Ingreso: junio-2010
Ubicación: Caracas - Venezuela
Mensajes: 21
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Graficos de Barra Que le falta al codigo
Basicamente ya lo puse a funcionar, pues lo he probado, lo que no se es como hacer ahora que ya lo tengo funcionando quitarles 2 botones y quede uno, para que se visualize aqui va el codigo completo funcionando... literarlmente puedo observar que las funciones de la seleccion tiene que ver con el envio de los datos, al persivir que fata uno, no muetra el grafico pero no veo la funcion, la he revisado de arriba a bajo que loco esta esto

Inicio en pagina PHP Codigo HTML
Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta name="author" content="Kart Buscado http://sychowaves.coml.com" />
  5. <meta name="description" content="Uso de javascript para generar graficos sencillos" />
  6. <meta name="keywords" content="funcion javascript raton" />
  7. <title>Gr&aacute;fico de barras</title>
  8. <link rel="stylesheet" type="text/css" href="estilos.css" />
  9. <script type="text/javascript" src="Funciones.js"></script>
  10.  
  11. <table summary="" width="80%">
  12. <tr><td align="center">
  13. <form name="formulario" action="">
  14. <input type="button" class="boton" id="Mostrar" value="Mostrar" onMouseOver="window.document.getElementById('Ejemplo').style.visibility='visible'; window.document.getElementById('Contenedora').style.visibility='hidden'; window.document.formulario.Codigo.value='Ver Codigo'; Representa();"> 
  15. <input type="button" class="boton" id="Ocultar" value="Ocultar" onMouseOut="window.document.getElementById('Ejemplo').style.visibility='hidden'; window.document.getElementById('Contenedora').style.visibility='hidden'; window.document.formulario.Codigo.value='Ver Codigo';"> 
  16. <input type="button" class="boton" id="Codigo" value="Ver Codigo" onClick="window.document.getElementById('Ejemplo').style.visibility='hidden'; Conmutar();">
  17. </form></td></tr>
  18. </table>
  19.  
  20.  
  21. <div id="Capa_Principal" style="position: relative; width: 90%;">
  22. <div id="Ejemplo" style="visibility: visible; position: absolute; top: 0px; z-index: 0; width: 100%;" class="caja">
  23. <table colspec="1">
  24. <tr><td><h3>Titulo del Gr&aacute;fico</h3>
  25.     <p align=center id="fecha"></p></td></tr>
  26. <tr><td>
  27. <div id="fondo" style="top: 10px; left: 10px; height: 600px;" class="fondodiv">
  28. <h3>Valores del Gr&aacute;fico</h3>
  29. </div>
  30. </td></tr>
  31. <tr><td class="pequeno"><br><b>Nota:</b> Las datos previstos se calculan en funci&oacute;n de los datos medios del 
  32. a&ntilde;o hasta la fecha de actualizaci&oacute;n.</td></tr>
  33. </table>
  34. </div>
  35.  
  36. <div id="Contenedora" style="visibility: visible; position: absolute; top: 0px; z-index: 1;" class="caja">
  37. <p><b>Estilos utilizados</b></p>
  38. <pre>
  39.  
  40.  
  41. </pre>
  42.  
  43. <p&><b>C&oacute;digo HTML</b></p>
  44. <pre>
  45.  
  46. </pre>
  47. </div>
  48. </div>
  49. </body>
  50. </html>

Mis funciones JavaScript
Código Javascript: 
Ver original
  1. var ancho=48;
  2. var ano=new Array("1999","2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010");
  3. var Datos=new Array(1131, 1763, 2927, 4917, 5992, 7055, 8825, 9614, 8077, 7780, 7947, 4128);
  4. var Fecha=new Date(2005,10,20);     // LOS MESES EMPIEZAN DESDE 0 => HAY QUE PONER EL MES ACTUAL MENOS 1
  5. var F_Escala=25;
  6.  
  7. function Rellena_Ceros(cadena,N)
  8. {
  9. var k=0;
  10. var resultado=cadena.toString();
  11. for (k=resultado.length; k<N; k++)
  12.         resultado="0" + resultado.toString();
  13. return resultado;
  14. }
  15.  
  16. function Puntua(valor)
  17. {
  18. var i=0;
  19. var resultado=Rellena_Ceros((valor%1000),3);
  20. var resultado=valor%1000;
  21. var tmp=parseInt(valor/1000);
  22. while (tmp>0)
  23.     {
  24.     resultado=Rellena_Ceros((tmp%1000),3) + "." + resultado;
  25.     tmp=parseInt(tmp/1000);
  26.     }
  27. while (resultado.charAt(0)=="0")                        // Quitar los 0 iniciales
  28.     resultado=resultado.substring(1,resultado.length);
  29. return resultado;
  30. }
  31.  
  32. function Representa()
  33. {
  34. var i=0;
  35. var contenido;
  36. window.document.getElementById("fondo").style.width=ano.length*(ancho+5)+20;
  37. window.document.getElementById("fondo").style.background= "#FFFFCC";
  38. window.document.getElementById("fecha").innerHTML="Datos en miles a fecha: " + Fecha.getDate() + "/" +
  39.             (Fecha.getMonth()+1) + "/" + Fecha.getFullYear();
  40. for (i=0; i<ano.length; i++)
  41.     {
  42.     posicion=(i*(ancho+5))+10;
  43.     altura=Datos[i]/F_Escala;
  44.     valor=Puntua(Datos[i]);
  45.     contenido=window.document.getElementById("fondo").innerHTML;
  46.     window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'azul\' id=\'" + ano[i].toString() + 
  47.         "\' style=\'z-index: 1; bottom: 30px;\' title=\'" + valor + "\'>" + Datos[i] + "</div>";
  48.     window.document.getElementById(ano[i]).style.bottom=30;
  49.     window.document.getElementById(ano[i]).style.left=posicion;
  50.     window.document.getElementById(ano[i]).style.height=altura;
  51.     window.document.getElementById(ano[i]).style.width=ancho;
  52.     contenido=window.document.getElementById("fondo").innerHTML;
  53.     window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom: 15px; left: " +
  54.          (posicion+10) + "px;\'>" + ano[i] + "</span>"
  55.         }
  56. Prevision(i-1);      // Representar la prevision en función de los datos del ultimo año
  57. }
  58.  
  59. function Prevision(V)
  60. {
  61. var contenido;
  62. Origen = new Date(Fecha.getFullYear(),0,1);         // Primer dia del año
  63. Final = new Date(Fecha.getFullYear(), 11,31);           // Ultimo dia del año
  64. N_Dias=1+(Final.valueOf()-Origen.valueOf())/86400000;       // Dias totales del año, por si es bisiesto
  65. Dias=1+(Fecha.valueOf()-Origen.valueOf())/86400000;     // Dia Juliano de la fecha de actualizacion de los datos
  66. Diario=Math.round(Datos[V]/Dias);               // Respuestas medias por dia
  67. Estimado=Diario*N_Dias;                     // Respuestas estimadas
  68. posicion=(V*(ancho+5))+10;                  // dimensiones, posicion y texto a poner en la barra grafica
  69. altura=Estimado/F_Escala;
  70. valor=Puntua(Estimado);
  71. contenido=window.document.getElementById("fondo").innerHTML;
  72. window.document.getElementById("fondo").innerHTML=contenido + "<div class=\'lila\' id=\'Previsto\' style=\'z-index: 0; bottom: 30px;\' title=\'Respuestas Previstas " + valor + "\'></div>";
  73. window.document.getElementById("Previsto").style.bottom=30;
  74. window.document.getElementById("Previsto").style.left=posicion;
  75. window.document.getElementById("Previsto").style.height=altura;
  76. window.document.getElementById("Previsto").style.width=ancho;
  77. contenido=window.document.getElementById("fondo").innerHTML;
  78. window.document.getElementById("fondo").innerHTML=contenido + "<span style=\'color: #000077; position: absolute; bottom:" + (altura+30) +"; left: " + posicion + "px;\'> Previsto<br>" + Estimado + "</span>"
  79. }

Lomas importante las CSS
Código CSS: 
Ver original
  1. .fondodiv {
  2.     position: relative;
  3.     border-style: ridge;
  4.     border-width: 1px;
  5.     font-size: 10px;
  6.     font-weight: bold;
  7.     vertical-align: bottom;
  8.     text-align: center;
  9. }
  10. .lila {
  11.     position: absolute;
  12.     background-color: #CC99FF;
  13.     border-color: #CC99FF;
  14.     color: white;
  15.     width: 75px;
  16.     vertical-align: middle;
  17. }
  18. .azul {
  19.     position: absolute;
  20.     color: white;
  21.     background-color: #4444FF;
  22.     border-color: #4444FF;
  23.     width: 75px;
  24.     vertical-align: middle;
  25. }
  26. .pequeno {
  27.   font-size: 8px;
  28.     font-style: italic;
  29. }

de Hecho corre perfecto hasta que le quito los botones que ya no quiero que salgan pero como les dije los quito y la funcion desconocida no me deja ver los graficos de barra....

AYUDA...... Alguien que sepa algo de java estara por alli?........ ;)

Etiquetas: 123, barra, css, graficos, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:00.