Graficando series Más videos
Comentarios: 16
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
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.
?
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.
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.
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.
Desplegando las Series
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.
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.
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;
}
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.
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.
16Comentarios
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...
Esto sucede porque están hechas con Flash, para imprimirlas tienes que darle click derecho->imprimir. saludos
No me quedo claro donde se define el xAxis y su funcion custom, intente hacerlo en el cuerpo del chart pero no funciona :(
"...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
Hola .. quisiera saber como agregar un titulo al chart .. para que se imprima cuando se imprime el flash, saludos y gracias
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 ?
que es gráfica la ventana de series
Me ha sido de gran ayuda :)
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);
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 })
Tampoco me aparecen las leyendas en ext js4 (u_u) Help me! ing
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/
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.
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
En la demostración no sale nada.
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.