Aprendiendo Ext JS 3

Gráficas en Ext JS 3 Más videos

Descripción del tema

Una de las funcionalidades nuevas que tiene la versión tres de la librería de Ext JS es la posibilidad de crear fácilmente gráficas de barras, lineares y de pastel a partir de un store.

Material de apoyo

Para continuar es necesario descargar el material de apoyo, el cual contiene un HTML que únicamente está incluyendo la librería de Ext JS (la versión 3 RC 1) y un JS vacío en el cual escribiremos el código necesario para generar las gráficas.

Empaquetar el tutorial

Antes de seguir adelante vamos a “empaquetar” el código que estaremos escribiendo, ya sabemos las ventajas de hacerlo ya que estudiamos un tema al respecto.
//the namespace for this tutorial
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.Charts = {
	init: function(){
		//Aquí vamos a escribir el resto del código
	}
}

Ext.onReady(com.quizzpot.tutorial.Charts.init,com.quizzpot.tutorial.Charts);
El código anterior debe ir en el archivo “chart.js”

Definir la información a graficar

Ahora vamos a definir la información que necesitamos graficar, para este ejemplo voy a graficar diferentes librerías de Javascript y el número de usuarios tienen sus comunidades (la información es totalmente falsa, una suposición solamente), es importante mencionar que esta información puede venir de una base de datos o de alguna otra fuente, además puede ser interpretada en cualquier formato soportado por el store (XML, JSON, Array), para este ejemplo la información proviene de un arreglo definido directamente en el código.
//información a graficar
var data = [['Ext JS',115000],['jQuery',250100],['Prototype',150000],['mootools',75000],['YUI',95000],['Dojo',20000],['Sizzle',15000]];
		
//se crea el Store que manipula la información
var store = new Ext.data.ArrayStore({
	fields:[{name:'framework'},{name:'users', type:'float'}]
});
store.loadData(data); // se carga la info en el store
El código anterior ya lo hemos discutido en temas anteriores por lo tanto debe serte familiar.

Las gráficas

Este componente es una adaptación de la librería YUI, la cual funciona utilizando un “swf” (una película de flash) para poder generar la imagen de la gráfica, es “personalizable” pues nos permite cambiar el aspecto de la gráfica (colores, tipografía, estilos), los componentes se encuentran dentro del paquete “Ext.chart” así que te recomiendo mirar la documentación.

Gráfica de barras

Vamos a crear una gráfica de barras con la información que tenemos en el store, esto lo hacemos de la siguiente manera:
var columnChart = new Ext.chart.ColumnChart({
	store: store,
	//url:'../ext-3.0-rc1/resources/charts.swf',
	xField: 'framework',
	yField: 'users'
});
Las propiedades básicas de configuración son esas tres solamente, adicionalmente podemos especificarle la “url” donde se encuentra el “swf” que se encarga de mostrar la gráfica, esto es importante si no queremos que lo busque directamente en la página de Yahoo y es obligatorio si no contamos con acceso a Internet. Mediante la propiedad “xField” se le indica a la gráfica de donde tomar la información del eje “X”, mientras que la propiedad “yField” indica la fuente de información para el eje “Y”, estos dos campos son necesarios para generar una gráfica de barras. Si le agreamos la propiedad "renderTo", podemos renderear en pantalla la gráfica y se verá de la siguiente manera
Grfica

Gráfica de barras

Gráfica lineal

Una gráfica linear se hace exactamente igual que una gráfica de barras, únicamente utilizamos el componente “LineChart” de la siguiente manera.
var lineChart = new Ext.chart.LineChart({
	store: store,
	xField: 'framework',
	yField: 'users'
});
Con eso es suficiente para generar una gráfica lineal muy básica, para renderearla en pantalla podemos usar la propiedad "renderTo".
Grfica

Gráfica linear

Gráfica de pastel (Pie Chart)

La gráfica de pastel se crea diferente a las anteriores, y esto es porque aquí no hay ejes (x | y), una gráfica de pastel se crea por porcentajes, el componente “PieChart” se encarga de todo, únicamente es necesario configurar lo siguiente:
var pieChart = new Ext.chart.PieChart({
	store: store,
	dataField: 'users', //la información a graficar
	categoryField : 'framework' //las etiquetas o categorías
});
En el código anterior la propiedad “dataField” es la que contiene la información a graficar y la propiedad “categoryField” es la que contiene las categorías que se están graficando, estas dos propiedades son muy importantes para que la gráfica se pueda generar correctamente.
Grfica

Gráfica de pastel

Colocarlas en pantalla

En este paso vamos a crear los paneles necesarios, se los asignamos a uno principal y lo “renderizamos” en el div "frame" que se encuentra en el documento HTML, además haremos que los paneles que contienen la gráfica se colapsen.
var panel1 = new Ext.Panel({
	title: 'Column chart example',
	items:[columnChart]
});
	
var panel2 = new Ext.Panel({
	title: 'Line chart example',
	items:[lineChart]
});
		
var panel3 = new Ext.Panel({
	title: 'Pie chart example',
	items:[pieChart]
});
		
var main = new Ext.Panel({
	renderTo: 'frame',
	width:450,
	defaults: {
		height:250,
		collapsible: true,
		border:false,
		titleCollapse: true
	},
	items: [panel1,panel2,panel3]
});
El código que hemos escrito en éste tutorial genera la siguiente pantalla.
Grfica

Gráficas en Ext JS 3

Hemos visto anteriormente el funcionamiento de los paneles así que debes estar familiarizado con el código anterior.

Conclusiones

Las gráficas que nos proporciona la versión tres de Ext JS, nos permiten desplegar la información de una manera muy sencilla y agradable, además de que se integra muy fácilmente a los otros componentes (paneles, ventanas, formularios, etc.). En este tema vimos algo acerca de la nueva versión de Ext JS en futuros artículos mostraré algunos otros componentes que se han agregado a esta versión, como siempre si tienen dudas o sugerencias pueden dejarlos en los comentarios además pueden registrarse en el foro y participar resolviendo dudas.

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?

27Comentarios

  • Avatar-8 Alvaro Jiménez 08/06/2009

    Antes que nada muchísimas gracias por la entrega de tus conocimientos. ¿ será posible poner más datos en el eje x ? Como para comparar dos años, etc.

    • Avatar-1 Álvaro 16/06/2009

      Hola, he seguido el tutorial paso a paso y no me llegan a aparecer las gráficas. Me aparece el siguiente mensaje: Warning: Cannot establish communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player. For more information see: http://www.adobe.com/products/flashplayer/articles/localcontent/ He intentado actualizar todos los plugins de flashpayer y he intentado desplegarlo en un servidor de aplicaciones, pero sin ningún éxito. ¿Alguna idea para que me funcione? P.D: Enhorabuena por la web, está muy bien.

      • Avatar-7 Crysfel 16/06/2009

        Te invito a que te registres en el foro (http://foro.quizzpot.com) y pongas el código que estas utilizando, así podemos ayudarte mejor. De acuerdo al error que estas teniendo imagino que es porque le estas dando mal la URL del SWF que se encarga de pintar la gráfica.

        • Avatar-12 luis 26/09/2009

          El problema que tuve al elabora las gráficas fue al momento de imprimir las paginas que las contenia, no se imprime la gráfica por la impresora a pero en el explorador si, exporte a pdf y tampoco funciono...

          • Avatar-6 luis 26/09/2009

            Saludos a todos y pido de antemano el no haber saludado. Este sitio me parece excelente muy bueno...

            • Avatar-9 Brother 05/12/2009

              un saludo a todos, pienso que este sitio esta muy bueno, sobre todo para aquellos que estamos iniciando con ext, sobre los graficos, he intentado ver los ejemplos que estan disponibles en la version 3.0 pero ninguno se visualiza, probe desde windos y desde ubuntu pero nada, si me pudieran ayudar con eso estaria muy agradecido,.....

              • Avatar-12 Crysfel 07/12/2009

                Para que te funcionen correctamente debes utilizar un servidor web para poder hacer las peticiones Ajax

                • Avatar-1 Alfredo 12/01/2010

                  Ante todo te felicito y te agradezco por la ayuda que nos brindas al compartir tu sabiduria. Mi problema me parece que es sencillo pero a pesar de eso no he dado con la solucion, como hago para poner la escala en numeros enteros unicamente? Si pudieses decirme como hacerlo me seria de mucha ayuda, de antemano muchas gracias.

                  • Avatar-5 Erick Landeros 21/05/2010

                    Ante todo quiero agradecer el apoyo que se nos das con este medio a los programadores que nos iniciamos en esto, y pues tengo una consulta, hay forma de asignar con una variable los datos que mostrara la grafica, estoy intentando con una consulta ajax desde jquery y el resultado de la consulta en json la quiero poner en el data para que se muestre la grafica, pero al momento de ejecutar no se muestra la grafica, sin embargo si puedo ver la respuesta json mediante un alert, de antemanos un agradecimiento y saludos

                    • Avatar-5 Silvio 27/05/2010

                      Hola .. tengo un problema en una grafica de barras .. tiene por el eje X nombres de empresas y en el ejeY valores de productividad. EL problema es que muestra todas las barras pero no todos los nombres de empresa, los nombres estan orientados verticalmente, ta probe recortando los nombres y nada . .no se por que muestra unso di y otros no .. hay algun parametro de configuracion para esto ? gracias !!

                      • Avatar-5 Silvio 27/05/2010

                        Hola .. mira puedes utilizar esto: yAxis: new Ext.chart.NumericAxis({ labelRenderer: Ext.util.Format.numberRenderer('0,0') }) eso te formatea los valores del ejeY a entero.

                        • Avatar-1 Miguel Ibarra 26/06/2010

                          necesito conocer mas de Extjs

                          • Avatar-10 Miguel Ibarra 26/06/2010

                            necesito un ejemplo claro de las graficas de Extjs

                            • Avatar-4 Daniel 30/06/2010

                              Excelente informacion!

                              • Avatar-9 pablo medici 22/12/2010

                                Hola, muchisimas gracias por el material, me sirvio mucho. Lo tengo andando en firefox y chrome. Sin embargo en internet explorer no se ven las graficas, alguna idea? Muchisimas Gracias

                                • Avatar-4 Luis Fernando 23/12/2010

                                  Saludos a todos, queria hacer graficos que jalen datos de una base de datos, para lo cual uso un jsonreador para hacer el datastore. Los datos los puedo ver con el firebug pero la grafica sale en blanco, nisiquiera salen los ejes que le asigno, algien tiene una idea de que este sucediendo, gracias

                                  • Avatar-10 Aris Arias 21/03/2011

                                    Hola a todos: necesito saber si al gráfico de pastel se le puede poner sobre cada una de sus partes el por ciento que representa del pastel, es decir, evitar el tooltip sobre las regiones y ver directamente los valores sobre las secciones del pastel.

                                    • Avatar-4 Alvaro 29/03/2011

                                      Hola, me gustaría saber si existe algun complemento de graficos para el Ext Designer, ya que el que tengo instalado no lo trae por defecto.

                                      • Avatar-5 Jose 10/10/2011

                                        quisiera saber como generar graficos con contenido dinamico que venga de una base de datos

                                        • Avatar-2 ADAM 26/03/2012

                                          Exelente información, Quisiera saber si es posible formatera el valor (que aparezca de esta manera $999,999,999) que se observa al pasar el mouse por los puntos en el grafico de linas.

                                          • Avatar-10 ADAM 26/03/2012

                                            Excelente información, Quisiera saber si es posible formatear el valor (que aparezca de esta manera $999,999,999) que se observa al pasar el mouse por los puntos en el gráfico de líneas gracias.

                                            • Avatar-7 lolikun 03/05/2012

                                              Al igual que otros compañeros, quisieramos el mismo ejemplo pero con contenido directo de una BD ^^

                                              • Avatar-3 Cesar Alvarez 15/08/2012

                                                Hola, he seguido el tutorial paso a paso y no me llegan a aparecer las gráficas. Me aparece el siguiente mensaje: Warning: Cannot establish communication between YUI Charts and JavaScript. YUI Charts must be served from HTTP and cannot be viewed locally with file:/// protocol unless location is trusted by Flash Player. For more information see: http://www.adobe.com/products/flashplayer/articles/localcontent/ He intentado actualizar todos los plugins de flashpayer y he intentado desplegarlo en un servidor de aplicaciones, pero sin ningún éxito. ¿Alguna idea para que me funcione?

                                                • Avatar-3 paca 18/08/2012

                                                  quierola imagen

                                                  • Avatar-5 juan 14/09/2012

                                                    Hola estoy que hago un grafico de lines bueno el problema es que tengo un boton que me habre un panel con el grafico el problema es que al abrirlo primero me funciona normal pero si lo cierrro y nuevamente le doy a mostrar grafico me arroja un mensaje: Error en tiempo de ejecucion de Microsoft JScript: No se puede obtener valor de la propiedad 'addCls': el objeto es nulo o esta sin definir. me podrian decir a que se debe este error.

                                                    • Avatar-11 Cristian 24/09/2013

                                                      Yo quiero una barra de lineas no de barra ni de patel q nunca suben al go bueno en este canal

                                                      • Avatar-8 jose 20/11/2013

                                                        como podemos combinar una grafica de barras con una de tipo linea

                                                        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.