JAVASCRIPT - Gráficos en columna

Gráficos en columna

Compatibilidad: Ms Internet Explorer, Netscape
Este script permite obtener gráficos en columna. Los valores están impostados por defecto, pero intenta modificarlos en la página y pulsa después en el "reload" de tu navegador.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide JavaScript from Java-Impaired Browsers
function getHplot(){
 n=new initArray(0,0,0,0,0,0)
 v=new initArray(0,0,0,0,0,0)
 rtitle=document.isnform.title.value;
 stitle=document.isnform.stitle.value;
 document.write('<TABLE BORDER=1 WIDTH=450><TR><TD '
 +'COLSPAN=3 ALIGN=CENTER><B>Gráfico horizontal en columnas</'
 +'B></TD></TR><TR><TD COLSPAN=3 ALIGN=CENTER><B>'
 +rtitle+'</B><BR><I>'+stitle+'</I></TD></TR>');
 v[0]=document.isnform.v1.value;
 v[1]=document.isnform.v2.value;
 v[2]=document.isnform.v3.value;
 v[3]=document.isnform.v4.value;
 v[4]=document.isnform.v5.value;
 v[5]=document.isnform.v6.value;
 n[9]=0;
 n[6]=0;
 n[7]=0;
 for (var i=0;i<6;i++){
  if (v[i].length>n[9]){
   n[9]=v[i].length;
   }
  /* The next three lines are needed for visitors who
     still live on the Win3.x platform.  If none of your
     visitors use older platforms,
     n[i]=eval(v[i]);
     may be substituted for these three lines. */
  str=v[i]
  StringToNumber();
  n[i]=num; // eval(v[i]); may be substituted
  if (n[i]<0){
   n[i]=0;
   }
  n[6]+=n[i];
  if (n[i]>n[7]){
   n[7]=n[i];
   }
  }
 n[10]=(n[9]+6)*8
 n[8]=n[7]/(450-n[10]); // my divisor
 document.write('<TR><TD><B>'+document.isnform.n1.value
 +'</B></TD><TD><IMG SRC="java98a.gif" HEIGHT=10 WIDTH='
 +(n[0]/n[8])+' BORDER=1></TD><TD>'+v[0]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n2.value
 +'</B></TD><TD><IMG SRC="java98b.gif" HEIGHT=10 WIDTH='+(n[1]/n[8])
 +' BORDER=1></TD><TD>'+v[1]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n3.value
 +'</B></TD><TD><IMG SRC="java98c.gif" HEIGHT=10 WIDTH='+(n[2]/n[8])
 +' BORDER=1></TD><TD>'+v[2]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n4.value
 +'</B></TD><TD><IMG SRC="java98d.gif" HEIGHT=10 WIDTH='+(n[3]/n[8])
 +' BORDER=1></TD><TD>'+v[3]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n5.value
 +'</B></TD><TD><IMG SRC="java98e.gif" HEIGHT=10 WIDTH='+(n[4]/n[8])
 +' BORDER=1></TD><TD>'+v[4]+'</TD></TR>'
 +'<TR><TD><B>'+document.isnform.n6.value
 +'</B></TD><TD><IMG SRC="java98a.gif" HEIGHT=10 WIDTH='+(n[5]/n[8])
 +' BORDER=1></TD><TD>'+v[5]+'</TD></TR>');
 document.write('<TR><TD COLSPAN=3><HR NOSHADE></TD></TR></TABLE>');
 getVplot();
}

function getVplot(){
 n[8]=n[7]/100;
 document.write('<P><TABLE BORDER=0 WIDTH=450><TR><TD'
 +' COLSPAN=6 ALIGN=CENTER><B>Gráfico vertical en columnas</B></TD></TR>'
 +'<TR><TD COLSPAN=6 ALIGN=CENTER><B>'
 +rtitle+'</B><BR><I>'+stitle+'</I></TD></TR><TR>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98a.gif" HEIGHT='
 +(n[0]/n[8])
 +' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98b.gif" HEIGHT='
 +(n[1]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98c.gif" HEIGHT='
 +(n[2]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98d.gif" HEIGHT='
 +(n[3]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98e.gif" HEIGHT='
 +(n[4]/n[8])+' WIDTH=50 BORDER=1></TD>'
 +'<TD VALIGN=BOTTOM ALIGN=CENTER><IMG SRC="java98a.gif" HEIGHT='
 +(n[5]/n[8])+' WIDTH=50 BORDER=1></TD></TR><TR>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n1.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n2.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n3.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n4.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n5.value+'</B></TD>'
 +'<TD ALIGN=CENTER><B>'+document.isnform.n6.value+'</B></TD></TR>'
 +'<TR><TD ALIGN=CENTER>'+v[0]+'</B></TD>'
 +'<TD ALIGN=CENTER>'+v[1]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[2]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[3]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[4]+'</TD>'
 +'<TD ALIGN=CENTER>'+v[5]+'</TD></TR><TR><TD COLSPAN=6'
 +'><HR NOSHADE><P></TD></TR></TABLE>');
}
var pwr=new initArray(1,2,3,4);
pwr[0]=1;
pwr[1]=10;
pwr[2]=100;
pwr[3]=1000;
pwr[4]=10000;
pwr[5]=100000;
pwr[6]=1000000;
pwr[7]=10000000;
/* Add more to array - pwr[8]=100000000, etc. -
   if strings longer than 8 are to be used. */
var ns="0123456789"
var cr="";
var str="";

/* Pass this function a string (named "str") and it will
   return a number (named "num")  Useful until all versions
   of JavaScript on all platforms support string to numeric
   conversions with predictability. */
function StringToNumber(){
 num=0;
 strl=str.length;
 for (var j=strl-1;j>-1;j--){
  cr=str.substring(j,j+1);
  pos=ns.indexOf(cr);
  num+=pos*pwr[strl-j-1];
  }
 }

function initArray() {
 this.length=initArray.arguments.length;
 for (var i=0;i<this.length;i++) {
  this[i]=initArray.arguments[i];
  }
}
// End Hiding -->
</SCRIPT>

</HEAD>

<FORM NAME='isnform'>
<TABLE BORDER=0 WIDTH=440>
<TR><TD ALIGN=CENTER COLSPAN=10>Título del gráfico: <INPUT TYPE='text' NAME='title' SIZE='35' VALUE='Gráfico de ejemplo'>
<BR>Características: <INPUT TYPE='text' NAME='stitle' SIZE='40' VALUE='(valores en miles)'></TD></TR>
<TR><TD>Meses:</TD>
<TD><INPUT TYPE='text' NAME='n1' SIZE='3' VALUE='Ene'></TD>
<TD><INPUT TYPE='text' NAME='n2' SIZE='3' VALUE='Feb'></TD>
<TD><INPUT TYPE='text' NAME='n3' SIZE='3' VALUE='Mar'></TD>
<TD><INPUT TYPE='text' NAME='n4' SIZE='3' VALUE='Abr'></TD>
<TD><INPUT TYPE='text' NAME='n5' SIZE='3' VALUE='May'></TD>
<TD><INPUT TYPE='text' NAME='n6' SIZE='3' VALUE='Jun'></TD></TR>
<TR><TD><BR>Valores: 
<TD><INPUT TYPE='text' NAME='v1' SIZE='5' VALUE=1000></TD>
<TD><INPUT TYPE='text' NAME='v2' SIZE='5' VALUE=1200></TD>
<TD><INPUT TYPE='text' NAME='v3' SIZE='5' VALUE=800></TD>
<TD><INPUT TYPE='text' NAME='v4' SIZE='5' VALUE=1500></TD>
<TD><INPUT TYPE='text' NAME='v5' SIZE='5' VALUE=1600></TD>
<TD><INPUT TYPE='text' NAME='v6' SIZE='5' VALUE=1350>
</TD></TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]