Blog

En este tutorial vamos a graficar una serie que nos ayude a visualizar la diferencia de “ganancias” en un determinado año de cierto “Género” de película, esto lo graficaremos en un mismo “Plano cartesiano”, te recomiendo probar la demostración que he preparado.

Material de apoyo

Antes de continuar es necesario descargar el material de apoyo donde únicamente viene un HTML y un archivo JS.

Definir la información a graficar

Lo primero que necesitamos hacer es definir de donde tomaremos la información que vamos a graficar, para fines prácticos voy a definir la información directamente en el “Store” utilizando un array de JavaScript, pero tu puedes sacar esta información de una base de datos y utilizar Ajax para cargar el Store, ya hemos estudiado esto anteriormente.

var store = new Ext.data.JsonStore({
	fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
	data: [
			{year: 2004, comedy: 39000000, action: 53890000, drama: 38450000, thriller: 32060000},
			{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
			{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
			{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
			{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
		]
});

Hemos definido algunos “géneros” de películas que contienen una cantidad de dinero que se generó en años anteriores, esta información es suficiente para poder realizar la gráfica.

Creación de la gráfica

Vamos a crear la gráfica de columnas y usaremos una ventana para desplegarla en la pantalla, primero solamente graficaremos el género “comedy”.

var chart = new Ext.chart.ColumnChart({
	store: store, 		// Step 1
	xField: 'year',		//Step 2
	yField: 'comedy'	//Step 3
});

En el paso uno le hemos asignado el “store”, este paso es muy importante pues es aquí donde se relaciona la información que necesitamos graficar.

En el paso dos hemos definido el campo en el store (que asignamos en el paso uno) que será utilizado como el eje “X”.

En el paso tres definimos el campo donde saldrá la información para el eje “Y”.

Ahora necesitamos crear un contendor para renderizar la gráfica, en este caso utilizaremos una ventana con la siguiente configuración:

var win = new Ext.Window({
	title: 'Chart series example',
	width:550,
	height:320,
	layout:'fit',
	items: chart
});

win.show();

Esto es suficiente para que podamos ver un avance, al actualizar el explorador donde se encuentra nuestro ejemplo veremos algo como la siguiente imagen.

Agregando series

Hasta ahora hemos graficado solamente una categoría, para poder incluir otras más dentro del mismo gráfico necesitamos usar la propiedad “series” y eliminar la propiedad “yField” puesto que será asignada por cada serie en particular.

var chart = new Ext.chart.ColumnChart({
	store: store,
	xField: 'year',
	//yField: 'comedy' 		//Step 1
	series:[				//Step 2
		{yField:'comedy'},	//Step 3
		{yField:'action'},
		{yField:'drama'},
		{yField:'thriller'}
	]
});

En el paso uno eliminamos la propiedad “yField” para poder asignarla mediante las series que definiremos más adelante.

En el paso dos hemos creado un arreglo con las series que usaremos, dentro de este arreglo irá la configuración de cada serie, es importante mencionar que podemos definir propiedades diferentes en cada serie.

El último paso, el tres, es la configuración de cada serie, hice la configuración lo más sencilla posible para una mejor comprensión, únicamente se define la propiedad “yField” asignándole el campo de donde será tomado el valor.

Como pueden ver es extremadamente sencillo generar una gráfica que nos ayudará a visualizar de una manera fácil la comparación entre diferentes categorías, en este ejemplo usé géneros de películas, pero podemos utilizar cualquier otro tipo de información.

Agregar leyenda

Para mejorar un poco nuestro gráfico es conveniente agregar una leyenda con el significado de cada barra y su color, esto lo hacemos de la siguiente manera.

var chart = new Ext.chart.ColumnChart({
	store: store,
	xField: 'year',
	series:[
		{yField:'comedy'},
		{yField:'action'},
		{yField:'drama'},
		{yField:'thriller'}
	],
	extraStyle:{			//Step 1
		legend:{		//Step 2
			display: 'bottom'//Step 3
		}
	}
});

En el paso uno se definen estilos extra que serán utilizados por el gráfico, las propiedades definidas en este objeto sobre escribirán a las propiedades por defecto.

En el paso dos indicamos que agregaremos estilos a la leyenda.

En el paso tres únicamente le indicamos que queremos desplegar la leyenda en la parte inferior del gráfico, también podemos posicionarla al “top”, ”right”, “left” o “bottom”.

Para ver los cambios solamente es necesario refrescar la pantalla y veremos algo semejante a la siguiente imagen.

 

Cambiar el texto de la leyenda

Si eres observador habrás notado que el texto de la leyenda solamente son números, esto no le indica nada al usuario y además de que no es nada usable, necesitamos asignarle un texto más descriptivo.

{yField:'comedy',displayName:'Comedy'},
{yField:'action',displayName:'Action'},
{yField:'drama',displayName:'Drama'},
{yField:'thriller',displayName:'Thriller'}

Dentro de cada serie se ha configurado la propiedad “displayName” la cual nos permite asignarle un texto más amigable a la leyenda que desplegaremos.

Formato a los ejes

Ahora vamos a ponerle formato al texto que se despliega en los ejes, en el eje “Y” necesitamos darle formato de moneda, para eso solamente agregamos la siguiente configuración dentro de la definición del ColumnChart.

yAxis: new Ext.chart.NumericAxis({
	labelRenderer: Ext.util.Format.usMoney
})

La propiedad “labelRenderer” acepta una función que procesará el contenido a desplegar por cada ítem del eje, esto es muy semejante al funcionamiento del “renderer” que usamos en los grids.

Ahora modificaremos el eje “X” asignando una función personalizada.

xAxis: new Ext.chart.CategoryAxis({
	labelRenderer:  this.customFormat
})

Luego definimos la función “customFormat” que procesará el contenido a mostrar, esta función debe pertenecer al objeto principal.

customFormat:function(value){
	return 'Year: '+value;
}

Nótese que para los ejes se han usado dos componentes diferentes, “Ext.chart.NumericAxis” para crear un rango numérico y “Ext.chart.CategoryAxis” para utilizar las categorías que definimos en el store.

Conclusiones

Es muy sencillo realizar gráficas con ExtJS, además el componente es muy flexible ya que nos permite personalizarlo fácilmente, he tratado de hacer el tutorial lo más sencillo posible, utilizando solamente las configuraciones básicas para el correcto funcionamiento pero te recomiendo que comiences a experimentar y jugar un rato con este componente.

Si todavía no estas siguiéndonos en Twitter(@quizzpot) te sugiero lo hagas para estar al tanto de las actualizaciones, además te puedes inscribir a las Feeds o por correo electrónico.