grafico de barras

xandria · #1 (**permalink**) 19/09/2006, 08:01

Hola gente, recien postie sobre lo mismo en el foro de php, pero estube pensando que tal vez se pueda hacer en javascript.. Necesito hacer un grafico de barras con distintos valores para los meses del año.. algo sencillo, sin mucho drama... Estube tratando de hacerlo en php pero tube algunos problemas, alguien se pelio con esto en javascript alguna vez como para encaminarme?

Saludos

crcbad · #2 (**permalink**) 19/09/2006, 08:11

Es decir, tu quieres un gráfico de barras, en que se muestre mensualmente la cantidad realizada de algo determinada, es decir, Enero -> 2.000. Febrero -> 6.500... y así sucesivamente para formar el gráfico no?

Me imagino que lo querrás hacer dinámico, en plan de que si estamos en el mes de marzo, el gráfico solo salga hasta marzo, hasta que tu script detecte que es nuevo mes y empiece a construir el gráfico del mes siguiente?

crcbad · #3 (**permalink**) 19/09/2006, 09:04

Mira, en este ratito que tenía libre te he hecho un ejemplo que creo que te puede servir, necesitas crearte una imagen que se llame graf.gif que tenga 1 pixel de ancho y 10 pixels de alto del color que quieras y ponerla en el mismo directorio donde pongas el html con el código que te pongo a continuación

Código PHP:

  <html>
<head>
<script>
var meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
var impor = new Array(1000,2000,3000,2200,100,500,6500,4000,1000,0,0,0);
var tope = 1000;
 
function creaGrafico()
{
 tabla = document.createElement("TABLE");
 tabla.id = "tablaPrincipal";
 tabla.border = 1;
 document.body.appendChild(tabla);
 
 tbody = document.createElement("TBODY");
 tbody.id = "tbodyPrincipal";
 tabla.appendChild(tbody);
 
 for(i=0;i<meses.length;i++)
 { 
  porc = (impor[i] * 100) / tope;
 
  tr = document.createElement("TR");
  tbody.appendChild(tr);
 
  td1 = document.createElement("TD");
  td2 = document.createElement("TD");
  td3 = document.createElement("TD");
  td1.innerText = meses[i];
  td2.innerText = impor[i];
  td3.innerHTML = "<img src='graf.gif' width='"+porc+"' height='10'>";
  td1.width = "80px";
  td2.width = "20px";
  td3.width = tope + "px";
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
 } 
}
</script>
</head>
<body leftmargin="0" topmargin="0" onLoad="creaGrafico()">
</body>
</html>

Te explico un poco que he hecho y por qué que igual es algo borroso de entender

Lo primero, he creado un array estático con los 12 meses del año, y consecutivamente, otro array con 12 importes ( he puesto importes como pueden ser otras cosas, bellotas, pipas... ), y cada importe se relacionará con su correspondiente mes.

La tabla que he creado dinámicamente montará una estructura inicial de una tabla con un tbody, y después a medida que recorremos cada elemento del array de meses creamos un TR, con 3 TDS, es decir, una fila, con 3 columnas, de tal modo que al final del script tendremos una tabla con 12 filas, y cada fila con 3 columnas, es decir, un total de 36 celdas.

La primera columna contendrá por ejemplo el mes actual que marca el bucle que recorre los meses, la segunda columna, aprovechando ese bucle tendrá el importe del segundo array, y el tercero contendrá la imagen que te he dicho antes, CUYO WIDTH, es decir, cuyo ancho, será el resultado de aplicar una regla de 3 para hayar el porcentaje que representa el importe de un mes respecto a un 100 %.

En el ejemplo, he puesto importes hasta el mes en el que estamos, Septiembre, por eso en el ejemplo, a partir de ese mes, no saldrá gráfico, ya que el porcentaje es 0.

Espero que esto te sriva a tí, y a cualquier otro, si tenéis dudas o preguntillas no dudéis en hacerlas que aqui hay gente mu wena en Javascript.

** PD1: El script queda mu cutre pero funcional :P
** PD2: Acepto mejoras, críticas, ideas más simples, lo que sea ^^