Crear gráficas mediante SVG y sin PHP

Ya vimos como crear una gráfica con los datos que obteníamos mediante una consulta a la BD, mientras que la tabla si se reordenaba mediante Javascript, era necesario realizar llamadas al servidor para actualizar los datos. ¿Problemas?, que la llamada puede tardar en responder (dependiendo del servidor y muchas otras cosas) y que se pueden llegar a hacer muchas llamadas al servidor, lo cual tampoco puede llegar a ser muy bueno para el rendimiento de este.
Por ello vamos a realizar la gráfica SVG dinámicamente mediante Javascript, se ahorra uso del servidor, ya que la acción la realiza el navegador (si es Firefox, mejor que mejor), eso sí, sin saturarlo porque las acciones que hace no son muy complejas (dependiendo del tamaño de la tabla). Está claro que este modo de trabajo no se puede usar cuando los datos se actualizan con mucha frecuencia, casi contínuamente, porque entonces la creación de la tabla y de la gráfica debería ser siempre en el servidor (accediendo a los datos actualizados).

Mostrar resto >>

<< Ocultar resto
Ahora he cambiado el uso de un iframe para el SVG, por el de un objeto embed para poder acceder a él correctamente. Realmente accedía correctamente usando el iframe y el Firefox, pero cuando probé si funcionaba en IE, me daba fallos (para variar). En Opera tampoco funciona, creo que porque ellos soportan SVG Tiny, tendré que informarme más sobre ello.

    <embed id="svg" SRC="datos.svg"         width="500" height="400" frameborder="0">

Lo único destacable que hay que explicar es la parte que se encarga de la creación de las barras dentro de la imagen SVG (resaltado en negrita), también decir que el SVG solo debe tener los ejes de coordenadas y una etiqueta G que agrupe los resultados y que será el que se vacíe y rellene cada vez.

         // Se encarga de dibujar la tabla     // y la gráfica     function dibujarTabla() {              var html = "<table>";              // Obtenemos el documento SVG         var svgDocument =             document.getElementById(                 'svg').getSVGDocument();         var contenedor =             svgDocument.getElementById("contenedor");              // Cabecera         // En cada celda de la cabecera         // se le añade un evento para que         // cuando se pulse en ella se cambien         // el criterio de orden y tambien una         // imagen que indica el orden de cada         // columna         html += '<tr><th onclick="cambiar(0)">';         html += 'Comunidad/Ciudad Autónoma <img src="';         html += ((orden == 0)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th>';         html += '<th onclick="cambiar(1)">';         html += 'Habitantes (2000) <img src="';         html += ((orden == 1)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th>';         html += '<th onclick="cambiar(2)">';         html += 'Habitantes (2005) <img src="';         html += ((orden == 2)?             (ascendente? 'ord-asc.gif':'ord-des.gif'):             'ord-no.gif');         html += '"></th></tr>';                  // Se ordena la tabla         datos.sort(organizar);                  // Borramos los datos del contenedor         while (contenedor.hasChildNodes()) {             contenedor.removeChild(                 contenedor.firstChild);         }              // Por cada fila se escribe         // el codigo HTML necesario         for (var i=0; i<datos.length; i++) {             // Parte HTML             html += '<tr><td>'+datos[i][0]+                 '</td><td>'+datos[i][1]+                 '</td><td>'+datos[i][2]+                 '</td></tr>';                                   // Parte SVG                          // Creamos las barras             var shape = svgDocument.createElementNS(                 svgns, "rect");             shape.setAttributeNS(                 null, "x", 105+15*i);             shape.setAttributeNS(                 null, "y", 15+190 -                 parseInt(190*parseInt(                 datos[i][2])/8000000));             shape.setAttributeNS(                 null, "width", 10);             shape.setAttributeNS(                 null, "height", parseInt(                     190*datos[i][2]/8000000));             shape.setAttributeNS(                 null, "height", parseInt(                     190*datos[i][2]/8000000));             shape.setAttributeNS(                 null, "style",                 "fill:#fff3c9;stroke:#315c7c;"+                 "stroke-width:1.5000000;");                  contenedor.appendChild(shape);                          // Creamos el texto             shape = svgDocument.createElementNS(                 svgns, "text");             shape.setAttributeNS(                 null, "x", -220);             shape.setAttributeNS(                 null, "y", 115+15*i);             shape.setAttributeNS(                 null, "width", 10);             shape.setAttributeNS(                 null, "style",                 "font-size:7pt;fill:#000000;"+                 "font-family:Arial;text-anchor: end;");             shape.setAttributeNS(                 null, "transform",                 "matrix(0,-1.000000,1.000000,"+                 "0,0.000000,0.000000)");             shape.appendChild(                 svgDocument.createTextNode(                 datos[i][0]));                      contenedor.appendChild(shape);                      // Creamos la cifra             shape = svgDocument.createElementNS(                 svgns, "text");             shape.setAttributeNS(                 null, "x", -195);             shape.setAttributeNS(                 null, "y", 114+15*i);             shape.setAttributeNS(                 null, "width", 10);             shape.setAttributeNS(                 null, "style",                 "font-size:7pt;fill:#000000;"+                 "font-family:Arial;");             shape.setAttributeNS(                 null, "transform",                 "matrix(0,-1.000000,1.000000,"+                 "0,0.000000,0.000000)");             shape.appendChild(                 svgDocument.createTextNode(                 datos[i][1]));                      contenedor.appendChild(shape);         }                  html += '</table>';                  // Necesita un DIV con id=tabla         document.getElementById("tabla").innerHTML = html;     }

Te puedes bajar un ejemplo aquí: ARCHIVO