Tras la buena acogida de la cobertura de las Elecciones Generales 2008 decidimos que no nos podíamos quedar ahí. Nos gustó tanto compartir el widget, que pensamos que podríamos ir más allá y brindarte la posibilidad de usar nuestra herramienta de gráficas con tus propios datos.
También liberamos el código fuente, o lo que es lo mismo, ponemos a tu disposición las tripas por si quieres mejorar o ampliar su funcionamiento.
Para meter una de estas gráficas en tu web sólo necesitas dos cosas: un archivo XML que proporcione los datos, y el archivo charts.swf, que es el encargado de pintar la gráfica. ¿Y cómo son estos archivos XML? Lo mejor es verlo con ejemplos.
A la izquierda tienes el objeto en sí, charts.swf, que es quien pinta el gráfico y carga el archivo XML que puedes ver a la derecha. El texto resaltado es el que debes cambiar por el tuyo.
<?xml version="1.0" encoding="UTF-8"?>
<chart>
<title>Población</title>
<subtitle>Fuente: INE (2004)</subtitle>
<name_value1>hab</name_value1>
<type>bars</type>
<header_height>80</header_height>
<chart_data>
<piece>
<name>Barcelona</name>
<value1>1595110</value1>
</piece>
<piece>
<name>Madrid</name>
<value1>3132463</value1>
</piece>
<piece>
<name>Valencia</name>
<value1>797654</value1>
</piece>
</chart_data>
<colours>
<colour>0xaff500</colour>
<colour>0x3699a9</colour>
<colour>0xdaa000</colour>
</colours>
</chart>
<?xml version="1.0" encoding="UTF-8"?>
<chart>
<title>¿Ves los documentales de La2?</title>
<subtitle>Fuente: elaboración propia</subtitle>
<name_value1>%</name_value1>
<type>pie</type>
<header_height>80</header_height>
<pie_show_total>false</pie_show_total>
<chart_data>
<piece>
<name>Sí</name>
<value1>87</value1>
</piece>
<piece>
<name>No</name>
<value1>10</value1>
</piece>
<piece>
<name>NS/NC</name>
<value1>3</value1>
</piece>
</chart_data>
<colours>
<colour>0xaff500</colour>
<colour>0x3699a9</colour>
<colour>0xdaa000</colour>
</colours>
</chart>
Desde el XML puedes configurar muchos más aspectos: el tamaño de la letra, la ordenación de los datos, los valores secundarios, los valores inicial y final para ajustar la escala de las barras, etc. Tienes toda la referencia al final de esta página.
Si te has quedado con ganas de ver más, tenemos otros ejemplos con los que podrás experimentar. Bájate el paquete completo de las gráficas, y descomprímelo. Haz doble clic sobre el archivo ejemplos.html para verlos. Para editar un archivo XML puedes utilizar cualquier editor de texto sencillo, como el Bloc de notas que viene con Windows. Haz clic sobre el XML que quieras cambiar con el botón derecho del ratón y elige la opción "Abrir con". Luego elige el Bloc de notas.
En resumen, si quieres meter las gráficas en tu web haz lo siguiente:
Por defecto, charts.swf carga el archivo chart.xml, pero puedes especificar otro nombre de archivo usando el parámetro xmlfile. Por ejemplo, charts.swf?xmlfile=mi_archivo.xml.
También liberamos el código bajo licencia GPLv3 por si necesitas añadir o mejorar algo del funcionamiento de las gráficas.
El paquete contiene los siguientes archivos:
Esquema de parámetros XML en un gráfico de barras:
Esquema de parámetros XML en un gráfico de tarta:
Tienes la posibilidad de especificar un segundo valor que se muestra cuando pasas el ratón por encima de una barra o sector de la tarta. Por ejemplo, en una tarta que representa los escaños asignados a cada partido, puedes añadir el dato del número de votos como valor secundario. A eso se refieren X2 en los esquemas anteriores. Y para definir cuál de los dos valores es el que se representa, y cuál es el que se usa para el tooltip, usa el parámetro active_value en el XML. Echa un vistazo a los ejemplos population.xml y elections.xml para entenderlo mejor.
Si quieres firmar tus comentarios puedes iniciar sesión »
En este espacio aparecerán los comentarios a los que hagas referencia. Por ejemplo, si escribes "comentario nº 3" en la caja de la izquierda, podrás ver el contenido de ese comentario aquí. Así te aseguras de que tu referencia es la correcta. No se permite código HTML en los comentarios.
Subir al principio de la página
Lo sentimos, no puedes comentar esta noticia si no eres un usuario registrado y has iniciado sesión.
Si ya lo estás registrado puedes iniciar sesión ahora.