Continuando con SVG, vamos a realizar un ejemplo que nos puede ser de utilidad y para que no todo se quede en teoría. Para ello vamos a usar la tabla ordenada mediante Javascript y le vamos a añadir un documento SVG que muestre los habitantes del 2005 en una gráfica de barras. Aunque se podría hacer todo de forma estática, ya que el SVG permite interactuar con la página, lo haremos mediante PHP para que se entienda con mayor claridad.
Antes de nada tengo que avisar de una pequeño detalle, el SVG es un poco caótico a la hora de ser usado, pero solo en lo referente a los navegadores. A diferencia del Flash, que pertenece a una empresa y que es esta la que se encarga de crear un visor de los archivos swf, el SVG no pertecene a ninguna empresa y por ello no hay un visor universal para los archivos svg. Adobe (ahora también propietaria del Flash) es una de las empresas más involucradas en el proyecto SVG y creó un pluggin para ver los archivos svg. Aunque para mí es el más completo, tiene el inconveniente de que está pensado para IE, y que en Firefox funciona peor, y en Opera peor aún. Afortunadamente, Firefox y Opera visualizan SVG de forma nativa, pero no tienen toda la funcionalidad del pluggin de Adobe (el ejemplo que voy a mostrar ahora no funciona correctamente con Opera porque no rota el texto).
Vamos a transformar la página estática que usamos para las tablas que se ordenan mediante Javascript, en una página PHP dinámica, aunque tan solo vamos a simular la obtención de datos (para que luego vosotros la modifiquéis si obtenéis los datos mediante una consulta a la BD). También le vamos a añadir un iframe que llama a la página PHP que crea el SVG, que también será llamado cuando se reordenan las columnas.
<? // Array con los datos $datos[0] = array('Andalucía ', 7340052, 7849799); $datos[1] = array('Aragón ', 1189909, 1269027); $datos[2] = array('Principado de Asturias ', 1076567, 1076635); ... ?> <html> <head> ... // Datos de la tabla var datos = new Array(); <? $cont=0; foreach ($datos as $dato) { ?> // Creamos el array javascript datos[<? echo $cont++; ?>] = new Array('<? echo $dato[0]; ?>', '<? echo $dato[1]; ?>', '<? echo $dato[2]; ?>'); <? } ?> ... function cambiar(ind) { ... // Llama al SVG document.getElementById("svg").src = "svg.php?orden=" + orden + "&ascendente=" + ascendente; } ... <body> ... <iframe id="svg" SRC="svg.php" width="500" height="400" frameborder="0"/> ... </body> </html>
Lo siguiente que viene puede parecer lo más complicado, la creación del archivo SVG, pero es realmente sencillo porque para ello vamos a usar el programa Inkscape, un editor de SVG que es sencillo de usar. En el Inkscape dibujaremos la estructura de lo que será la gráfica, los ejes de coordenadas y un ejemplo de barra. Limpiaremos un poco el xml de propiedades innecesarias (aunque no es necesario) y diferenciaremos cada parte, fijándonos en las que forman cada barra, para luego repetirla en el PHP.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Cabecera --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <!-- Agrupamos --> <g id="grafica"> <!-- BARRA DE COORDENADAS --> <path style="fill: none;stroke:#000000;stroke-width:1.5000000" d="M 100,10 L 100,210 L 400,210" id="path1306" /> <!-- MARCA DE LOS 8 MILLONES --> <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,15 L 100,15" id="marca8mill" /> <!-- MARCA DE LOS 4 MILLONES --> <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,110 L 100,110" id="marca4mill" /> <!-- TEXTO DE LOS 8 MILLONES --> <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end" x="85" y="20" id="texto8mill">8 millones</text> <!-- TEXTO DE LOS 4 MILLONES --> <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end" x="85" y="115" id="texto4mill">4 millones</text> <!-- TEXTO COMUNIDAD AUTONOMA --> <text style="font-size:7pt;fill:#000000font-family:Arial;text-anchor:end" x="-220" y="115" id="text1" transform="matrix(0,-1.000000,1.000000,0,0.000000,0.000000)"> COMUNIDAD</text> <!-- RECTANGULO DE LA COMUNIDAD --> <rect style="fill:#fff3c9;stroke:#315c7c;stroke-width:1.5000000;" id="rect1" width="10" height="190" x="105" y="15"/> <!-- VALOR DE LA COMUNIDAD --> <text style="font-size:10px;fill:#315c7c;stroke:none;font-family:Arial" x="-195" y="114" id="valor1" transform="matrix(0.000000,-1.000000,1.000000,0.000000,0.000000,0.000000)"> 8000000</text> </g> </svg>
<? // El Content-type del SVG, para // que el navegador sepa de que tipo // de archivo se trata header("Content-type: image/svg+xml"); // Obtenemos el orden o lo ponemos // por defecto $orden = $_GET["orden"]; $orden = (!isset($orden)? 0 : $orden); // Obtenemos si es ascendente // o lo ponemos por defecto $ascendente = $_GET["ascendente"]; $ascendente = (!isset($ascendente)? true : $ascendente == "true"); $datos[0] = array('Andalucía ', 7340052, 7849799); $datos[1] = array('Aragón', 1189909, 1269027); $datos[2] = array('Asturias ', 1076567, 1076635); $datos[3] = array('Islas Baleares ', 845630, 983131); ... // Función que se encarga // de ordenar los datos // es igual que la de Javascript function ordenar($a, $b) { GLOBAL $ascendente, $orden; $signo = $ascendente? 1:-1; if (is_numeric($a[$orden])) { return ($a[$orden]+0 > $b[$orden]+0) ? $signo : -$signo; } else { return ($a[$orden] > $b[$orden]) ? $signo : -$signo; } } // Ordenamos los datos usort($datos, "ordenar"); // Cabecera SVG echo '<?xml version="1.0" encoding="utf-8" '+ 'standalone="no"?>'; echo '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" '+ "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">'; ?> <svg version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg"> <g id="grafica"> <!-- BARRA DE COORDENADAS --> <path style="fill:none;stroke:#000000;stroke-width:1.5000000" d="M 100,10 L 100,210 L 400,210" id="path1306" /> <!-- MARCA DE LOS 8 MILLONES --> <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,15 L 100,15" id="marca8mill" /> <!-- MARCA DE LOS 4 MILLONES --> <path style="fill:none;stroke:#000000;stroke-width:1.5000000;" d="M 90,110 L 100,110" id="marca4mill" /> <!-- TEXTO DE LOS 8 MILLONES --> <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end" x="85" y="20" id="texto8mill">8 millones</text> <!-- TEXTO DE LOS 4 MILLONES --> <text style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end" x="85" y="115" id="texto4mill">4 millones</text> <? $cont=0; // Por cada dato creamos una barra foreach($datos as $dato) { ?> <!-- TEXTO COMUNIDAD AUTONOMA --> <text style="font-size:7pt;fill:#000000font-family:Arial;text-anchor: end" x="-220" y="<? echo 115+15*$cont; ?>" id="text<? echo $cont; ?>" transform="matrix(0,-1.000000,1.000000,0,0.000000,0.000000)"><? echo $dato[0]; ?></text> <!-- RECTANGULO DE LA COMUNIDAD --> <rect style="fill:#fff3c9;stroke:#315c7c;stroke-width:1.5000000;" id="rect<? echo $cont; ?>" width="10" height="<? echo round(190*$dato[2]/8000000); ?>" x="<? echo 105+15*$cont; ?>" y="<? echo 15+190-round(190*$dato[2]/8000000); ?>"/> <!-- VALOR DE LA COMUNIDAD --> <text style="font-size:10px;fill:#315c7c;stroke:none;font-family:Arial" x="-195" y="<? echo 114+15*$cont; ?>" id="valor<? echo $cont; ?>" transform="matrix(0.000000,-1.000000,1.000000,0.000000,0.000000,0.000000)"><? echo $dato[2]; ?></text> <? $cont++; } ?> </g> </svg>
Todos los archivos necesarios se encuentran aquí: ARCHIVO, si tenéis algún problema al ejecutarlo, yo uso Wamp Server para instalar PHP y MySQL con facilidad, copiando la carpeta que se descomprima en el directorio raiz, debería funcionar todo correctamente.
escrito por Luis a las 2/16/2006 07:26:00 p. m.
ATOM
0 Comentarios:
Publicar un comentario
<< Inicio