Que
pasa cuando usted quiere crear un chart(gráfico) en el pentaho usando el plugin
fusion chart y ningún de los temas que trae por defecto le acomoda?
Pues
hoy le enseñaré como hacer nuestro propio tema para las gráficas que
queremos mostrar en pentaho.
Suponiendo que
tiene el servidor de pentaho instalado y de igual manera todo lo necesario para
trabajar con fusion chart, solo nos queda ubicarnos en la carpeta themes como
se muestra en la siguiente estructura:
biserver-ce/
pentaho-solutions/
system/
fusion_plugin/
fusioncharts/
JSClass/
themes/
Llegando a este punto, empecemos con crear un fichero con
el nombre de nuestro tema, por ejemplo: fusioncharts.theme.softpei.js
A continuación le pondré algunas propiedades
fundamentales y las más importantes a tener en cuenta para nuestro gráfico.
Antes de teclear las propiedades debemos crear la base del tema así como
registrar el tema. Abra el fichero creado y coloque la siguiente instrucción:
FusionCharts.register('theme',
{
name: 'softpei',
theme: {
base: {
Con lo anterior registramos nuestro tema
definiéndole como nombre softpei, luego definimos la base de
nuestro tema, en ella estarán las propiedades generales que tendrán nuestros
gráficos, sin importar el tipo de chart.
Las propiedades generales deben estar dentro la
instrucción: chart: {
Ahora vamos a ir viendo paso por paso cada
propiedad:
paletteColors:
'#1aaf5d, #c02d00, #0e948c, #0075c2, #f2c500'
La primera propiedad como vemos anteriormente es la
paleta de colores, solo incluyo 5 colores, aquí puede colocar tantos colores
desea usar en sus gráficos, no existe límites. Si el grafico que se genera es
de tipo column3d(barras horizontales) y dicha grafica tiene 5 barras,
el primer color que verá sería el primero que coloque en la paleta de colores,
en este caso sería un verde claro, la segunda barra se usará la 2da opción de
la paleta de colores que sería en este caso un marrón fuerte y así sucesivamente.
baseFontColor:
'#333333' - Color del texto que estará en la base del chart..
baseFont:
'Helvetica Neue,Arial' – Estilo del texto que estará en la base del chart
bgColor:
'#ffffff' – Color de fondo del chart
captionFontSize:
'14' – Tamaño de los títulos mostrados en el chart.
valueFontSize:
'14' – Tamaño de los valores mostrados en el chart.
showBorder:
'0' – Con el valor antes puesto definimos nuestro char sin bordes.
legendBgColor:
"#F6F6F6" – Color de fondo de las leyendas del chart.
Las siguientes propiedades se usan para formatear
los números que se muestran en las gráficas, si usted tiene valores como 12500,
13200 y 14600, automáticamente el pentaho te muestra 12.50K, 13.20K y 14.60K,
pero si deseamos que el formato de lo siguiente: 12,500, 13,200 y 14,600 debe
colocar las siguientes instrucciones como se muestra a continuación:
formatNumberScale:'0'
decimalPrecision:'0'
decimalSeparator:','
Las propiedades antes descritas son generales como
les mencione al inicio del artículo, pero puede definir como se mostrará cada
tipo de gráfico, por ejemplo si desea que el chart tipo bar3d el tamaño del texto
de los valores a mostrar sean diferente al tamaño definido arriba, para ello
debe teclear lo siguiente:
bar3d: { chart: { valueFontSize: '12' } }
Nuestro tema debe quedar como se muestra a
continuación:
FusionCharts.register('theme',
{
name: 'softpei',
theme: {
base: {
chart: {
paletteColors: '#1aaf5d,#c02d00,
#8cbb2c,#0075c2’,
baseFontColor: '#333333',
baseFont: 'Helvetica
Neue,Arial',
bgColor: '#ffffff',
captionFontSize: '14',
valueFontSize: '14',
showBorder: '0',
legendBgColor:
"#F6F6F6",
formatNumberScale:'0',
decimalPrecision:'0',
decimalSeparator:','
}
},
bar3d:
{
chart: {
valueFontSize:
'12'
}
}
}
});
Espero que este pequeño artículo le ayude a crear su
propio tema fusion chart para el servidor de pentaho 6.1.
No hay comentarios:
Publicar un comentario