Aprendiendo Ext JS 3

Graficando series Más videos

Descripción del tema

Anteriormente hemos hablado acerca del nuevo componente “Chart”, aprendimos como crear una gráfica sencilla circular o de “pastel”, una linear y de columnas, el día de hoy veremos como crear una gráfica con una serie de datos. 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.
Series

Graficando series

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.
Series

Gráfica muy sencilla

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.
Series

Desplegando las Series

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.
Series

Mostrando una leyenda en la parte inferior del gráfico

?

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.
Series

Agregar textos más amigables a las etiquetas

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;
}
Series

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.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

16Comentarios

  • Avatar-10 LUIS 29/09/2009

    Primero que todo un cordial saludos, he seguido el curso y realmente me parece muy impresionante tanto el contenido como la forma de expresar su conenido, realmente muy bueno, estoy muy agradecido. Con el tema chart (gráficas) encontré un pequeño detalle y es que no se pueden imprimir a pesar que se generan muy bien, es decir aparecen en el explorador perfectamente... No las puedo imprimir me gustaria saber el por que sucde esto?. de verdad que este curso es la exelencia. MUCHAS GRACIAS...

    • Avatar-8 Crysfel 01/10/2009

      Esto sucede porque están hechas con Flash, para imprimirlas tienes que darle click derecho->imprimir. saludos

      • Avatar-9 duda 03/11/2009

        No me quedo claro donde se define el xAxis y su funcion custom, intente hacerlo en el cuerpo del chart pero no funciona :(

        • Avatar-10 Crysfel 03/11/2009

          "...solamente agregamos la siguiente configuración dentro de la definición del ColumnChart" Y la función va dentro del objeto principal ;) Descarga el código fuente del tutorial para que veas exactamente el lugar. Saludos

          • Avatar-4 Silvio 21/04/2010

            Hola .. quisiera saber como agregar un titulo al chart .. para que se imprima cuando se imprime el flash, saludos y gracias

            • Avatar-11 Silvio 26/05/2010

              Hola .. un saludo ..tengo un problema a la hora de que se muestren las etiquetas del eje de las X. Las muestro horientadas verticalmente pues son textos pero cuando son varias columnas no muestra las etiquetas en todas las barras .. o sea, si muestra la barra pero no la etiqueta .. me pueden ayudar a resolver esto ?

              • Avatar-5 alicia 19/04/2011

                que es gráfica la ventana de series

                • Avatar-4 Emma 08/10/2013

                  Me ha sido de gran ayuda :)

                  • Avatar-12 Senpai 01/04/2014

                    En ext js 4 lo hice de esta manera, pero como cambio los nombres de las leyendas?.. al parecer displayname no se puede utilizar, y si se podria.... como lo utilizaria? //CODIGO Ext.ns('com.quizzpot.tutorial'); com.quizzpot.tutorial.SeriesTutorial = { init: function() { var store = Ext.create('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} ] }); var grafico = Ext.create('Ext.chart.Chart', { animate: true, store: store, //Leyenda legend: { boxStroke: 'transparent', labelColor: '#127ED0', position: 'right' }, axes: [ { type: 'Numeric', position: 'left', //title: 'Presupuesto', grid: true, minimum: 0 }, { type: 'Category', position: 'bottom', fields: ['year'], //title: 'Año' } ], series: [ { type: 'column', axis: 'left', highlight: true, xField: 'year', yField: ['comedy', 'action', 'drama', 'thriller'], style: { opacity: 0.93 } } ] }); var win = Ext.create('Ext.Window', { title: 'Ejemplo series Gráfico', width: 550, height: 320, maximizable: true, layout: 'fit', items: grafico }); win.show(); }, customFormat: function(value) { return 'Año: ' + value; } } Ext.onReady(com.quizzpot.tutorial.SeriesTutorial.init, com.quizzpot.tutorial.SeriesTutorial);

                    • Avatar-6 Senpai 02/04/2014

                      Lo siento pero esto en ext js4 no funciona :( yAxis: new Ext.chart.NumericAxis({ labelRenderer: Ext.util.Format.usMoney }) xAxis: new Ext.chart.CategoryAxis({ labelRenderer: this.customFormat })

                      • Avatar-3 Senpai 02/04/2014

                        Tampoco me aparecen las leyendas en ext js4 (u_u) Help me! ing

                        • Avatar-4 Crysfel Villa 02/04/2014

                          Hoa, en Ext JS 4 cambió un poco la manera en como se crean las gráficas, aquí te dejo un ejemplo de una gráfica de categorías sobre el eje X y numeros sobre el eje Y http://jsfiddle.net/crysfel/6mPA7/

                          • Avatar-8 Senpai 02/04/2014

                            Gracias por el ejemplo, aunque ya lo habia visto en Sencha Docs. El unico problema que tengo es la conversion de los numeros a dolares, y tambien la vizualisacion tipo tooltip, esa que cuando el mouse se acerca a la barra, muestra una información detallada.

                        • Avatar-9 Luigi Lopez 09/05/2016

                          Buen día, DIsculpa yo tengo un problema al crear las gráficas lo que pasa es que yo estoy utilizando extjs5, he utilizado tanto el codigo que manejas como el de la pagina de extjs5 pero sigue son funcionarme, algun consejo de como hacerlas ??? De antemano, gracias Saludos

                          • Avatar-6 Yorni Ramirez La O 07/03/2017

                            En la demostración no sale nada.

                            • Avatar-4 Yorni Ramirez La O 07/03/2017

                              Es muy facil, ademas de que queda muy bien. solo tengo un problema, no me funciona. incluso tu demostración tampoco funciona. al menos que tenga que activar algo en el explorador.

                              Instructor del curso

                              Crysfel3

                              Autor: Crysfel Villa

                              Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                              Descarga Código Fuente Ver Demostración

                              Regístrate a este curso

                              Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                              Tendrás acceso a descargar los videos, códigos y material adicional.

                              Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                              Llevarás un registro de tu avance.