Gráficas en Ext JS 3 Más videos
Comentarios: 27
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
Hemos visto anteriormente el funcionamiento de los paneles así que debes estar familiarizado con el código anterior.
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
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".
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.
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.
Gráficas en Ext JS 3
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.
Instructor del curso
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.
27Comentarios
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.
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.
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.
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...
Saludos a todos y pido de antemano el no haber saludado. Este sitio me parece excelente muy bueno...
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,.....
Para que te funcionen correctamente debes utilizar un servidor web para poder hacer las peticiones Ajax
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.
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
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 !!
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.
necesito conocer mas de Extjs
necesito un ejemplo claro de las graficas de Extjs
Excelente informacion!
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
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
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.
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.
quisiera saber como generar graficos con contenido dinamico que venga de una base de datos
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.
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.
Al igual que otros compañeros, quisieramos el mismo ejemplo pero con contenido directo de una BD ^^
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?
quierola imagen
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.
Yo quiero una barra de lineas no de barra ni de patel q nunca suben al go bueno en este canal
como podemos combinar una grafica de barras con una de tipo linea