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.
<< Ocultar resto
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.
<?
$datos[0] = array('Andalucía ',
7340052,
7849799);
$datos[1] = array('Aragón ',
1189909,
1269027);
$datos[2] = array('Principado de Asturias ',
1076567,
1076635);
...
?>
<html>
<head>
...
var datos = new Array();
<?
$cont=0;
foreach ($datos as $dato) {
?>
datos[<? echo $cont++; ?>] =
new Array('<? echo $dato[0]; ?>',
'<? echo $dato[1]; ?>',
'<? echo $dato[2]; ?>');
<?
}
?>
...
function cambiar(ind) {
...
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.
El SVG que nos quedaría sería algo parecido a esto:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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">
<g id="grafica">
<path
style="fill: none;stroke:#000000;stroke-width:1.5000000"
d="M 100,10 L 100,210 L 400,210"
id="path1306" />
<path
style="fill:none;stroke:#000000;stroke-width:1.5000000;"
d="M 90,15 L 100,15"
id="marca8mill" />
<path
style="fill:none;stroke:#000000;stroke-width:1.5000000;"
d="M 90,110 L 100,110"
id="marca4mill" />
<text
style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end"
x="85"
y="20"
id="texto8mill">8 millones</text>
<text
style="font-size:10pt;fill:#000000font-family:Arial;text-anchor: end"
x="85"
y="115"
id="texto4mill">4 millones</text>
<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>
<rect
style="fill:#fff3c9;stroke:#315c7c;stroke-width:1.5000000;"
id="rect1"
width="10"
height="190"
x="105"
y="15"/>
<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>
Como vemos, las partes
barra de coordenadas,
marca de los 8 millones,
marca de los 4 millones,
texto de los 8 millones y
texto de los 4 millones son fijos y no se deben tocar. Los otros tres que quedan son los que se deben crear dinámicamente según los valores obtenidos en el PHP. El código necesario sería el siguiente:
<?
header("Content-type: image/svg+xml");
$orden = $_GET["orden"];
$orden = (!isset($orden)? 0 : $orden);
$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);
...
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;
}
}
usort($datos, "ordenar");
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">
<path
style="fill:none;stroke:#000000;stroke-width:1.5000000"
d="M 100,10 L 100,210 L 400,210"
id="path1306" />
<path
style="fill:none;stroke:#000000;stroke-width:1.5000000;"
d="M 90,15 L 100,15"
id="marca8mill" />
<path
style="fill:none;stroke:#000000;stroke-width:1.5000000;"
d="M 90,110 L 100,110"
id="marca4mill" />
<text
style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end"
x="85"
y="20"
id="texto8mill">8 millones</text>
<text
style="font-size:10pt;fill:#000000font-family:Arial;text-anchor:end"
x="85"
y="115"
id="texto4mill">4 millones</text>
<?
$cont=0;
foreach($datos as $dato) {
?>
<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>
<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); ?>"/>
<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>
La posición y, la x y el alto de algunos elementos del SVG se calculan dinámicamente para una correcta situación en el documento SVG. Tambíén podrás apreciar que el x es negativo en el
valor de la comunidad, esto es debido a que está girado 90 grados y las coordenadas x e y se intercambian.
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.
ATOM
