Iniciar sesión | Registrarse | ¿Por qué registrarse?
  • Podrás comentar las noticias con el nombre que elijas
  • Podrás subir tus noticias en soitu.es y guardarlas en tu propia página

Gráficas Flash para todos

  • Cualquier usuario podrá utilizarlas con sus datos de forma libre
  • Es una herramienta similar a la que ofrecimos para las Elecciones Generales
  • Todo el código fuente se publica bajo licencia GPL
Por JUAN JESÚS G. HINESTROSA (SOITU.ES)
Actualizado 02-04-2008 12:41 CET

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.

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.

Gráfica sencilla de barras

<?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>

Descargar el XML

Gráfica sencilla de tarta

<?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></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>

Descargar el XML

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:

  1. Bájate el paquete completo de archivos y descomprímelo.
  2. Edita uno de los XML de ejemplo con tus datos.
  3. Sube charts.swf y chart.xml a tu servidor.
  4. Usa el código HTML que ves a continuación, cambiando el texto resaltado por la url de tu servidor.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="350" height="350"><param name="movie" value="http://tu_url/charts.swf"><param name="quality" value="high"><embed src="http://tu_url/charts.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="350" height="350"></embed></object>

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.

Y el código fuente, abierto de par en par

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:

  • charts.fla Archivo base. Abrir con Adobe Flash versión MX 2004 o superior.
  • chart_xml.as Archivo de código fuente ActionScript 2.0 que contiene lo relativo a la carga y "parseo" del archivo XML.
  • chart.as El meollo de todo. En este archivo de código fuente ActionScript 2.0 están todas las funciones que se encargan del dibujado de la gráfica.
  • charts.swf El archivo objeto Flash listo para cargar desde un navegador. Compatible desde Flash Player 7.
  • ejemplos.html > Archivo HTML con más ejemplos cargados desde varios XMLs.
  • Varios archivos XMLs, usados en los ejemplos.

Referencia de parámetros XML

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.

Referencia completa de parámetros en el archivo XML
parámetro (en amarillo obligatorios) valores posibles (valor por defecto) descripción
title cadena de texto Título de la gráfica
subtitle cadena de texto Subtítulo de la gráfica
name_value1 cadena de texto Nombre 1 de lo que representa
name_value2 cadena de texto Nombre 2 de lo que representa
type bars / pie Tipo de gráfica, bars para gráficos de barras y pie para gráficos de tarta
active_value 1 / 2 (1) El identificador del valor de lo que representa
order_by_what 0 / 1 / 2 (0) Especifica si queremos ordenar la gráfica de mayor a menor, y el identificador del valor. 0 si no queremos ordenar
rotate_bars_numbers true false (false) Especifica si queremos rotar las etiquetas de los números de las barras. Aplicable sólo a barras
refresh_time número entero Número de segundos hasta la recarga del archivo XML
chart_animation_speed número entero Velocidad de la animación. 0 para no tener animación.
bars_chart_max_value auto / número entero (auto) Forzar el valor máximo de la gráfica. Aplicable sólo a barras
bars_chart_min_value auto / número entero (auto) Forzar el valor mínimo de la gráfica. Aplicable sólo a barras
header_height número entero Alto del encabezado de la gráfica, donde van el titulo, el subtítulo y el nombre de lo representado
pie_footer_height número entero Alto del pie de la gráfica donde irá la leyenda de la tarta. Aplicable sólo a tarta
pie_show_total true false (true) Mostrar o no el total en el centro de la tarta. Aplicable sólo a tarta
pie_hole_size auto / número entero (auto) Tamaño en píxeles del agujero de la tarta. Aplicable sólo a tarta
font_sizes > title número entero (18) Tamaño de la fuente del título
font_sizes > subtitle número entero (11) Tamaño de la fuente del subtítulo
font_sizes > name_value número entero (14) Tamaño de la fuente del nombre del valor representado
font_sizes > numbers número entero (11) Tamaño de la fuente de los números de las barras
font_sizes > labels número entero (11) Tamaño de la fuente de las etiquetas de texto
font_sizes > tips número entero (11) Tamaño de la fuente del tooltip que aparece al pasar el ratón por algúna barra o sector de la tarta
font_sizes > pie_total número entero (20) Tamaño de la fuente de la suma total de elementos que sale en el centro de la tarta. Aplicable sólo a tarta
colours > colour número hexadecimal Lista de colores. Si no son suficientes para representar todos los datos, vuelve al primero
chart_data > piece > name cadena de texto Nombre del dato
chart_data > piece > value1 número Valor 1 del dato
chart_data > piece > value2 número Valor 2 del dato
Temas relacionados

Selección de temas realizada automáticamente por Autonomy

Di lo que quieras

Aceptar

Si quieres firmar tus comentarios, regístrate o inicia 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.

DI LO QUE QUIERAS

Lo sentimos, no puedes comentar esta noticia si no eres un usuario registrado y has iniciado sesión.
Si quieres, puedes registrarte o, si ya lo estás, iniciar sesión ahora.

Nuestra selección

Hasta la vista y gracias

Soitu.es se despide 22 meses después de iniciar su andadura en la Red. Con tristeza pero con mucha gratitud a todos vosotros.

El suplicio (o no) de viajar en tren en EEUU

Fuimos a EEUU a probar su tren. Aquí están las conclusiones. Mal, mal...

Presidimos la UE: que no falten los regalos para los periodistas

Algunos países ven esta práctica más cerca del soborno.

Soitu.es vuelve a ganar el premio de la ONA

A la 'excelencia general' entre los medios grandes en lengua no inglesa.

Tecnología
18:23

Políticos con iPad »

Para bien o para mal, el iPad se ha convertido en un habitual en muchas conversaciones. Ya sea para romper el hielo antes de una reunión o con el café en una comida familiar: defensores y detractores del aparato de Apple salen por doquier. ¿Es para tanto? ¿Vale la pena hacerse con uno? ¿No hace lo mismo que un ordenador?

En: E-Campany@

Recomendación: Albert Medrán

17:21

en La Casa Blanca libera código »

La Administración de Obama sigue dando ejemplo de apertura tecnológica al resto de los gobiernos del mundo: si una de sus banderas es la apertura de datos, ahora te toca al código fuente de módulos de Drupal Traducir »

En: radar.oreilly.com

Recomendación: Raúl Rivero

13:31

en infografia El imparable crecimiento de Internet »

En la BBC han hecho un gráfico impresionante sobre la evolución de Internet entre 1998 y 2008. Visto en elblogsalmon.com Traducir »

En: bbc.co.uk

Recomendación: mami

Estos son nuestros Selectores »

Lo más visto
1

Cómo sellar el paro por internet

RAMÓN PECO (SOITU.ES)
2

Sexo oral para ella

M. PÉREZ, J. J. BORRÁS Y X. ZUBIETA (SOITU.ES)
4

¿Qué es el sexo?

M. PÉREZ, J.J. BORRÁS y X. ZUBIETA (SOITU.ES)
5

Cómo masturbarse adecuadamente

M. PÉREZ, J. J. BORRÁS Y X. ZUBIETA (SOITU.ES)
Widgets

Widget Liga 0910

Clasificación, calendario, equipos, etc. »

Widget El tiempo

Situación actual y previsión de cinco días »

Widget Estaciones de esquí

Estado de las estaciones de esquí »

Widget Loterías y Sorteos

ONCE, Quiniela, Primitiva, etc. »

[Premio ONA a la excelencia en webs de habla no inglesa] [Premio al mejor diseño en internet y a la innovación]