Gráficas en Ext JS 3
May 07, 2009 | Español | By Crysfel | 19 Comments | Read in EnglishUna 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.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
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
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.
Commercial ExtJs and Sencha Touch Themes
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.