(pulse aquí para ver la versión
actualizada en inglés)
Clase com.java4less.rchart.ChartApplet (y RChartServlet)
Puede usar la clase ChartApplet para mostrar los gráficos en
su página web.
Algunos parámetros del applet tienen un formato especial:
- Colores: los valores validos son: RED,BLUE,GREEN,BLACK,GRAY,LIGHTGRAY,WHITE,DARKGRAY,YELLOW,ORANGE,CYAN
y MAGENTA. También puede user el número entero correspondiente
a un color.
- Los estilos de las líneas tienen el formato <anchura>|<color>|<estilo>.
Estilo puede ser LINE, DASHED (línea discontinua) o DOTS (puntos).
Ejemplop: "0.2|RED|LINE"
- Los tipos de letra tienen el formato <tipo de letra>|<estilo>|<tamaño>.
El estilo puede ser PLAIN, ITALIC (cursiva) o BOLD (negrita). Ejemplo:
"Arial|BOLD|12"
- Estilo de relleno: como el color.
- Lista de valores. Las listas de valores son elementos separados por
"|"
Los parametros del applet son:
Título
- TITLECHART. Texto del título.
- TITLE_FONT. tipo de letra.
- TITLE_COLOR. Color.
Etiqueta del eje
- XLABEL. Texto de la etiqueta.
- XLABEL_FONT. tipo de letra.
- XLABEL_COLOR. Color.
- XLABEL_VERTICAL. Si "true" la etiqueta se dibujará
con una rotación de 90 grados.
- YLABEL_VERTICAL
- YLABEL
- YLABEL_FONT
- YLABEL_COLOR
- Y2LABEL_VERTICAL. Parámetros para el segundo eje Y.
- Y2LABEL
- Y2LABEL_FONT
- Y2LABEL_COLOR
Scale
- XSCALE_MIN
- YSCALE_MIN
- XSCALE_MAX
- YSCALE_MAX
- Y2SCALE_MAX. Parámetros para el segundo eje Y.
- Y2SCALE_MIN
Axis
- XAXIS: "true" o "False". Para indicar si se debe dibujar
el eje.
- YAXIS
- Y2AXIS
- XAXIS_GRID. estilo de la línea de la rejilla.
- YAXIS_GRID
- Y2AXIS_GRID
- GRIDX, GRIDY, GRIDY2: si "true", la rejilla se ajustará
a los ticks grandes.
- TICK_INTERVALX. defecto 1.
- TICK_INTERVALY
- TICK_INTERVALY2
- BIG_TICK_INTERVALX. defecto 5.
- BIG_TICK_INTERVALY
- BIG_TICK_INTERVALY2
- XAXIS_LABELS. Lista de etiquetas para los ticks.
- YAXIS_LABELS
- Y2AXIS_LABELS
- XAXIS_START_WITH_BIG_TICK: si "true" el primer tick será
uno grande, con etiqueta.
- YAXIS_START_WITH_BIG_TICK
- Y2AXIS_START_WITH_BIG_TICK
- CERO_XAXIS : valores válidos son NO,LINE y SCALE.
- CERO_YAXIS.
- CERO_Y2AXIS.
- XAXIS_STYLE. estilo de la línea del eje.
- YAXIS_STYLE.
- Y2AXIS_STYLE.
- XAXIS_FONT. tipo de letra de las etiquetas de los ticks.
- YAXIS_FONT
- Y2AXIS_FONT
- XAXIS_FONT_COLOR. Color.
- YAXIS_FONT_COLOR
- Y2AXIS_FONT_COLOR
- XAXIS_INTEGER. "True" or "false". If true the value
2.0 will be displayed as "2".
- YAXIS_INTEGER
- Y2AXIS_INTEGER
- XAXIS_LABEL_FORMAT. Si XAXIS_INTEGER es falso, el formato se usará
para dibujar las etiquetas. Por ejemplo "#####.00" siempre dibujará
2 digitos decimales. El formato usa los siguientes símbolos:
- 0 un dígito,
- # dígito o blanco
- . separador decimal
- , separador de grupos
- - caracter de signo.
- YAXIS_LABEL_FORMAT
- Y2AXIS_LABEL_FORMAT
- XAXIS_VERTICAL_LABELS. Si "true" las etiquetas se dibujarán
con una rotación de 90 grados.
- XAXIS_TICKATBASE . "True" or "false".
- YAXIS_TICKATBASE
- Y2AXIS_TICKATBASE
Legend
- LEGEND_FILL. Estilo de relleno de la leyenda. Este es el estilo de fondo.
- LEGEND_COLOR. Color del texto de la leyenda.
- LEGEND_FONT. tipo de letra.
- LEGEND_VERTICAL. "True" o "false". Disposición
de los elementos de la leyenda.
- LEGEND_BORDER: Estilo de la línea del borde de la leyenda.
- LINECHART3D_SEPARATOR: número de pixels entre línes de distintas
series (por defecto 0).
Series de datos (SERIE_1,SERIE_2, ...)
- SERIE_1. Nombre de la serie.
- SERIE_BARS_COLORS_1: lista de colores usada para las barras o columnas.
Esto permite tener diferente colores de barras en la misma serie. Por ejemplo:
"RED|WHITE|BLUE"
- SERIE_DATA_1. Datos de la serie (valores Y). Ejemplo: "0|23|76|4"
- SERIE_DATAX_1. (opcional) uselo si necesita especificar los valores de X.
Ejemplo: "0|2|4|6"
- SERIE_DATA_LABELS_1: (opcional) uselo si necesite especificar sus propias
etiquetas para los puntos/barras. Es un array que debe tener tantos elementos
como SERIE_DATA_1. Ejemplo: "cero|two|four|six"
- SERIE_STYLE_1. estilo de las líneas (para series de tipo LINE) o
estilo de relleno para barras (para series de tipo BAR).
- SERIE_TYPE_1: Tipo de la serie (LINE, LINE2D ,BAR, BAR3D o PIE). Para dibujar
curvas debe usar los valores: "CURVE" (curva que pasa por los puntos),
B-SPLINES (curva aproximada que pasa cerca de los puntos, es más suave)
o LINE_LEAST_SQUARES (para crear un línea aproximada).
- SERIE_FILL_1: estilo de relleno para series de tipo LINE.
- SERIE_FONT_1: Tipo de letra para los valores de la serie. Poner NULL para
suprimir las etiquetas.
- SERIE_COLOR_1: color.
- SERIE_POINT_1: "True" o "false" (para series de tipo
LINE). Indica si hay que dibujar un punto junto al valor.
- SERIE_POINT_COLOR_1: color del punto (para series de tipo LINE).
- SERIE_POINT_IMAGE_1: fichero que contiene la imagen para los puntos (gif
o jpg). El fichero debe ser relativo a la posición del applet ( por
ejemplo "point.gif" o "..\images\point.gif") o absoluto
(por ejemplo "http://www.mysite.com/images/point.gif").
- SERIE_BORDE_TYPE_1: estilo del borde de la barra (para series de tipo BAR).
NORMAL, RAISED (efecto de elevación) o LOWERED (efecto de barra hundida).
- SERIE_BORDER_1:estilo de la línea del borde de la barra (para series
de tipo BAR).
- SERIE_DRAW_LINE_1: Dibujar una línea entre los valores? Y o N.
- SERIE_FORMAT: indica el formato de los valores del gráfico. El defecto
es "#####.##" ( use 0 para dígitos, + para dígitos
or blancos y . para separador decimal)
- SERIE_SECONDYAXIS: si "true" esta serie usará el segundo
eje Y. Este eje se dibuja a la derecha del gráfico.
Gráficos circulares ("tartas")
- PIE_LABEL_FORMAT: formato de las etiquetas del gráfico. Se pueden
usar las siguiente variables: #VALUE#, #PERCENTAGE# y #LABEL#. Por ejemplo,
el siguiente format: "#LABEL# = #PERCENTAGE#" produciría
una salida como: "ItemA = 35%". Ver el parámetro
SERIE_LABELS.
- PIE_STYLE_1: Estilo de relleno del primer elemento en SERIE_1 si es de tipo
PIE. El segundo necesitará el parametro PIE_STYLE_2. ...
- PIE_NAME_1: texto para la leyenda. El segundo elemento necesitará
el parámetro PIE_NAME_2 ...
- SERIE_PERCENTAGES_1: "True" o "False". Para mostrar
el valor absoluto o el porcentaje en las etiquetas. Sólo aplicable
si no se usa el parámetro PIE_LABEL_FORMAT.
- SERIE_DISTCENTER_1: Valor entre 0-1. Indica la distancia al centro de los
valores.
- SERIE_LABELS_1: etiquetas a usar si la variable #LABEL# está incluida
en PIE_LABEL_FORMAT. Por ejemplo, si el gráfico tiene 3 items, las
etiquetas podrían ser: "Product|Services|Other"
- SERIE_TOGETHER_1: Lista de valores boleanos que indica que partes del gráfico
circular deben mostrarse resaltadas. Por ejemplo: "TRUE|FALSE|TRUE"
mostrará resaltado el segundo valor del gráfico.
- PIECHART_RADIUS: Radio del círculo. Valor entre 0 y 1.
- PIECHART_3D: "True" o "False".
- PIE_BORDER: estilo de la línea usada como border.
RadarChart
- RADARCHART_BACK: estilo de fondo del diagrama.
- RADARCHART_BORDER: estilo de las líneas del border y las lines
de factores.
- RADARCHART_CIRCLE: dibujar un círculo entorno al gráfico
(true o false).
- RADARCHART_FAKTOR_COLOR: color de los nombres de los factores.
- RADARCHART_FAKTOR_FONT: tipo de letra para los nombre de los factores.
- RADARCHART_FAKTOR_MAX: lista de valores máximos para cada factor.
Por ejemplo <PARAM NAME = "RADARCHART_FAKTOR_MAX" VALUE =
"100|100|100|100">.
- RADARCHART_FAKTOR_MIN: lista de valores mínimos para cada factor.
Por ejemplo <PARAM NAME = "RADARCHART_FAKTOR_MIN" VALUE =
"0|0|0|0">.
- RADARCHART_FAKTOR_NAMES: nombre de los factores.
- RADARCHART_TICKS: número de ticks en la rejilla.
- RADARCHART_GRID: estilo de la rejilla.
- RADARCHART_GRID_FONT: tipo de letra usada para dibujar los valores
de los ticks.
- RADARCHART_GRID_FONT_COLOR: color de los valores de los ticks.
- RADARCHART_RADIUS: Controla el radio del diagrama. El valor por defecto
es 0.9. Valores válidos son de 0 a 1.
Gráficos de barras
- BARCHART_VERTICAL: "True" o "False". Columnas verticales
o barras horizontales.
- BARCHART_CUMULATIVE: "True" o "False". True para gráficos
de barras apiladas.
- BARCHART_CUMULATIVE_BACK_COMPATIBLE: si "true", el gráfico
de barras apiladas se dibujará como en versiones anteriores de RChart.
If "false", los valores se sumarán automaticamente para crear
las barras apiladas.
- BARCHART_BARWIDTH
- BARCHART_BARSPACE
- BARCHART_GROUPSPACE
- BARCHART_BACK: estilo de fondo del gráfico.
- BARCHART3D_DEPTH (sólo para BarChart3D): longitud del eje Z (profundidad
del gráfico).
- BARCHART3D_FULL_DEPTH (sólo para BarChart3D): Si es TRUE la profundidad
de las barras/columnas será la misma que la del gráfico. Si
es FALSE será la mitad de su anchura.
- BARCHART3D_BACK (sólo para BarChart3D): estilo de fondo del gráfico.
Gráfico de líneas
- LINECHART_BACK: estilo de fondo del gráfico.
- LINECHART3D_DEPTH (sólo para LineChart3D): length of the Z axis (depth
of the chart).
- LINECHART3D_BACK (sólo para LineChart3D): estilo de fondo del gráfico.
- LINECHART3D_BORDER (sólo para LineChart3D): estilo del border de
las líneas. El defecto es null (sin borde).
Gráficos de máximos y mínimos (Burbujas, OHLC
y Candlestick)
- SERIE_BUBBLE_1: si es verdadero (TRUE), los valores máximos
se usarán como radio para dibujar burbujas. En este caso los valores
mínimos no se usan.
- SERIE_FILL_BUBBLE_1: si es verdadero las burbujas serán sólidas.
- SERIE_MAX_DATA_1: valores máximos. Ejemplo: "0|23|76|4"
- SERIE_MIN_DATA_1: valores mínimo. Ejemplo: "0|23|76|4"
- SERIE_CLOSE_DATA_1: valores de cierre. Ejemplo: "0|23|76|4"
- SERIE_LINE_TYPE_1: tipo de gráfico (NORMAL, OHLC o CANDLESTICK).
El tipo NORMAL no necesita valores de cierre.
- SERIE_LINE_END_1: dibujar un terminador de línea? Y or N
- SERIE_CANDLE_POSITIVE_COLOR_1: (sólo CANDLESTICK) Color cuando
el valor de cierre > valor de apertura.
- SERIE_CANDLE_NEGATIVE_COLOR_1:(sólo CANDLESTICK) Color cuando
el valor de cierre < valor de apertura.
- SERIE_MAXMIN_STYLE_1: estilo de la línea vertical.
- SERIE_OPENCLOSE_WIDTH_1: anchura de la línea horizontal para
los valores de apertura y cierre.
Gráfico
- LEGEND_POSITION: posición de la leyenda. Valores válidos
son RIGHT, TOP o BOTTOM
- LEFT_MARGIN. (defecto 0.1, 10%). Espacio reservado para el eje Y.
- TOP_MARGIN. (defecto 0.1, 10%). Espacio reservado para el título.
- BOTTOM_MARGIN. (defecto 0.1, 10%). Espacio reservado para el
eje X.
- LEGEND_MARGIN. (defecto 0.2, 20%). Espacio reservado para la
leyenda.
- CHART_BORDER: estilo de lína del borde.
- CHART_FILL: estilo de relleno del fondo del gráfico.
- BACK_IMAGE: fichero que contiene la imagen de fondo (gif o jpg). El
fichero debe ser relativo a la posición del applet ( por ejemplo
"back.gif" o "..\images\back.gif") o absoluto (por
ejemplo "http://www.mysite.com/images/back.gif").
- DATAFILE: specifiica el fichero (URL) que contiene la definición
del gráfico.
Características interactivas
Estos parámetros sólo se pueden usar en la version interactiva.
- CHART_WIDTH: anchura del gráfico (en pixels). La barra de scroll
horizontal se activará si el gráfico es más ancho
que el espacio disponible.
- CHART_HEIGHT: altura del gráfico (en pixels). La barra de scroll
vertical se activará si el gráfico es más alto que
el espacio disponible.
- CHART_ALLOW_ZOOM: si TRUE los botones +/- del zoom estarán visibles.
- CHART_MAX_ZOOM: zoom máximo en %. El defecto es 200.
- CHART_MIN_ZOOM: zoom mínimo en %. El defecto es 50.
- CHART_ZOOM_INC: incremento del zoom en % para los botones +/-. El defecto
es 25.
Usar 2 ejes Y.
Es posible dibujar más de un eje Y en el gráfico. Por
defecto el eje Y se dibuja a la izquierda del gráfico, sin embargo
es posible dibujar un segundo eje a la derecha. Para ello debe usar los
parámetros Y2*.
Cargar la definición de un fichero
Tal vez desea crear el gráfico mediante un CGI, un servlet o
simplemete un fichero en el servidor. RChart le permite:
- leer la definición de los parámetros del applet (ya explicado).
- leer la definición de un fichero.
- combinar las dos
los parámetros de un applet tienen la forma::
<PARAM NAME = "parameter name1" VALUE = "parameter
value1">
<PARAM NAME = "parameter name2" VALUE = "parameter
value2">
...
el fichero de definición de RChart una syntaxis muy parecida:
parameter name1=parameter value1
parameter name2=parameter value2
...
Puede usar todos los parámetros explicados en este documento
como parámetros del applet o dentro de un fichero de definición.
Para que RChart lea la definición de un fichero debe incluir en
el applet el siguiente parámetro:
<PARAM NAME = "DATAFILE" VALUE = "definition.txt">
Vea los ejemplos en los ficheros AppletData.html y AppletData2.html.
Integración con JavaScript
También puede usar javascript para modificar la apariencia del
applet. Los siguientes métodos están disponibles:
- setParameter(String param,String value): cambian un parámetro.
Ejecute rebuild para applicar los camnios.
- loadFromFile(String psFile,String Clear): carga un fichero de
definición. Clear puede valer 'N' o 'Y'. Si vale 'N' los
nuevos parámetros se añadirán a los ya existentes.
Si vale 'Y' el gráfico se reinicializará.
- rebuild(String Clear,String reReadFile): Reconstruyer el gráfic.
Clear puede valer 'N' o 'Y'. Si vale 'N' los nuevos parámetros
se añadirán a los ya existentes. Si vale 'Y' el gráfico
se reinicializará. reReadFile puede valer 'N' or 'Y'. Especifica
si el fichero en el parámetro DATAFILE se debe releer.
Por ejemplo, la siguiente función cambia el estilo de la segunde
serie de un gráfico:
function changeStyle() {
document.TestApplet.setParameter('SERIE_STYLE_2','2|GREEN|DASHED');
document.TestApplet.rebuild('N','N');
}
Vea un ejemplo en el fichero chart1.html
Servlets
RChartServlet le permite usar RChart como servlet sin necesidad de programar
en lenguaje Java[TM]. El Servlet tiene la ventaja de que no debe descargar classes
desde el servidor al navegador, ahorrando asi tiempo. Por lo tanto el Servlet
crea graficos más rapidamente. Tiene sin embargo la desventaja de que
necesita que el servidor Web pueda ejecutar Servlets.
En el caso de los servlets, los gráficos se crean en el servidor y se
envían al navegador en forma de imagen GIF, PNG o JPEG. Esto tiene la
ventaja además de que puede usar RChart en navegadores que no soporten
el lenguaje Java[TM].
Puede usar RChartServlet de forma muy sencilla. Los parámetros son los
mismos que los del Applet. Los parámetros se pueden enviar usando POST
o GET. Además existen los siguiente parámetros adicionales:
- WIDTH: anchura en pixels de la imagen resultante. (el defecto es 500).
- HEIGHT: altura en pixels de la imagen resultante. (el defecto es 500).
- FORMAT: formato de la imagen resultante, "gif", "png"
or "jpeg". (el defecto e JPEG).
- use el parámetro DATAFILE si desea leer la definición del
gráfico de un fichero.
Notar que:
- RChartServlet necesita Java Development Kit 1.2 o superior. Es sin embargo
posible crear una version compatible con 1.1
- El codificador GIF debe descargarse de esta dirección: http://www.acme.com/resources/classes/Acme.tar.gz
- El codificador PNG debe descargarse de esta dirección: http://users.boone.net/wbrameld/pngencoder/
Para ejecutar el servlet usando JSWDK 1.0 debe hacer lo siguiente:
- copie las clases de RChart a /jswdk-1.0.1/examples/Web-inf/servlets
- Agrege la siguiente línea /jswdk-1.0.1/examples/Web-inf/servlets.properties
:
RChartServlet.code= RChartServlet
- Copie los ficheros de datos (ChartData1.htm, ChartData2.htm
.... ) a
/jswdk-1.0.1/examples
- Ejecute el servidor de servlet e introduzca la siguiente URL:
http://localhost:8080/examples/servlet/RChartServlet?DATAFILE=http://localhost:8080/examples/ChartData1.htm
http://localhost:8080/examples/servlet/RChartServlet?DATAFILE=http://localhost:8080/examples/ChartData2.htm
.. ...
- Con los parámetros adicionales puede modificar el formato de la imagen:
http://localhost:8080/examples/servlet/RChartServlet?DATAFILE=http://localhost:8080/examples/ChartData2.htm&FORMAT=gif&WIDTH=600&HEIGHT=600
Java,
JSP, JDBC, JDK and all Java-based marks are trademarks or registered trademarks
of Sun Microsystems, Inc. in the U.S. and other countries. J4L Components
is independent of Sun Microsystems, Inc.