Creando gráficos de barras en HTML
Para poder crear gráficos de barras sin tener que instalar componentes tediosos ni complicados, podemos hacerlo de manera sencilla utilizando HTML. Podemos utilizar HTML_Graph, que es una interfaz que provee una clase sencilla en PHP. Si nos descargamos el paquete de ejemplo podremos ver como crea los diferentes gráficos utilizando HTML simple, sin ninguna complicación, utilizando una tabla y unas imágenes para mostrar el gráfico. Aquí os dejo una imagen de las descargas de mis programas a modo de ejemplo:
El código de ejemplo es el siguiente:<HTML>
<HEAD>
<TITLE>Example of HTML_Grahp</TITLE>
</HEAD>
<BODY>
<H2 ALIGN=CENTER>Programs</H2>
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ContextTHDXFolder </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">HDB64Bits </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">KillerApp </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">NeuralLinking4 </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="90"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(9) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Pathlinker </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ProjectServer </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="90"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(9) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Taskkiller </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax BookKepping </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Cript Text </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Dynamic Plot </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Mail Sender </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Renamer Installer </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Save Series </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="60"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(6) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax Search Folders </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax TFN Converter </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax WriteImage </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax XAT </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">Thundax XML Parser </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="80"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(8) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxColourHistogram </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxConvexHull </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="40"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(4) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxDrawPolygon </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxEnclosingCircle </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="50"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(5) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxImageCrop </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="60"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(6) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxRandomImage </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="20"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(2) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxSpanningTree </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="30"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(3) </FONT></I></TD></TR>
<TR><TD ALIGN=RIGHT BGCOLOR="#FFFFFF"><FONT SIZE="-1" COLOR="#000000" STYLE="">ThundaxSTDOUT </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"> </FONT></TD><TD ALIGN=LEFT BGCOLOR="#FFFFFF"><IMG SRC="images/hbar_blue.gif" HEIGHT=10 WIDTH="10"><I><FONT SIZE="-2" COLOR="#000000" STYLE="">(1) </FONT></I></TD></TR>
</TABLE>
</BODY>
</HTML>
Como podéis comprobar, es bastante sencillo y sirve para hacer un pequeño gráfico demostrativo. Si queremos algo más potente, podemos utilizar los ejemplos hechos en PHP de la página HTML Graphs, donde encontraremos un pequeño simulador y el código que nos servirá para crear la gráfica, pero necesitaremos un servidor de PHP:
Podemos también encontrar ejemplos en Javascript, por ejemplo en la web de JavaScript Diagram Builder dónde hay ejemplos y pequeños componentes para la creación de gráficos de barras para que nuestra información sea más cómoda de representar.
Comments
Post a Comment