Ext.chart.series.

Series
Series: es la clase abstracta que contiene la lgica comn a todas las series del grfico. La serie incluye los mtodos de Etiquetas(Labels), destacados(Highlights), consejos(Tips) y llamadas mixins(Callouts mixins). Esta clase implementa la lgica de la gestin de eventos de ratn(mouse), la animacin(animating), escondindose(hiding), mostrando todos los elementos(showing) y devolver el color de la serie(returning) para ser utilizado como un elemento de leyenda. Listeners (Los oyentes) La clase serie es compatible con los Listeners a travs de la sintaxis Observable. Algunos de estos Listeners son los siguientes: * Itemmouseup: Cuando el usuario interacta con un marcador. * Itemmousedown: Cuando el usuario interacta con un marcador. * Itemmousemove :Cuando el usuario interacta con un marcador. * AfterRender: Se activa cuando la animacin termina o cuando la serie se ha renderizado completamente. Por ejemplo:
series: [{ type: 'column', axis: 'left', listeners: { 'afterrender': function() { alert('afterrender'); } }, xField: 'category', yField: 'data1' }]

Ext.chart.Chart xtype: chart

Charts proporcionar una forma flexible para lograr una amplia gama de capablitities de visualizacin de datos. Cada grfico obtiene sus datos directamente de un Store, y actualiza automticamente su pantalla cada vez que cambian los datos de store. Adems, el aspecto y la sensacin de un grfico se puede personalizar mediante temas(Themes.).

Creando un Simple Chart

Cada chart tiene tres partes principales: un store que contiene los datos, una serie de ejes(array of Axes) que definen los lmites de la tabla, y una o ms series que manejan la representacin visual de los puntos de datos.

Pasos: 1. Creacin de un almacn o Modelo El primer paso es crear un modelo que representa el tipo de datos que se muestran en el grfico. Por ejemplo, los datos de un grfico que muestra la previsin meteorolgica, puede ser representada como una serie de puntos de datos "WeatherPoint" con dos campos - "temperatura" y "fecha":
Ext.define('WeatherPoint', { extend: 'Ext.data.Model', fields: ['temperature', 'date'] });

2. Creacin de una tienda o Store Store contiene una coleccin de instancias de modelos "WeatherPoint". Los datos podran ser cargados dinmicamente, pero en aras de facilidad este ejemplo utiliza datos en lnea:
var store = Ext.create('Ext.data.Store', { model: 'WeatherPoint', data: [ { temperature: 58, date: new Date(2011, { temperature: 63, date: new Date(2011, { temperature: 73, date: new Date(2011, { temperature: 78, date: new Date(2011, { temperature: 81, date: new Date(2011, ] });

1, 1, 1, 1, 1,

1, 1, 1, 1, 1,

8) }, 9) }, 10) }, 11) }, 12) }

2. Creacin de un objeto grfico o Chart

Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 400, height: 300, store: store });

Eso es todo lo que se necesita para crear una instancia de grfico que est respaldado por un store. Sin embargo, si el cdigo anterior se ejecuta en un navegador, se mostrara la pantalla en blanco. Esto es porque las dos piezas que son responsables de la pantalla visual, los ejes del grfico y series, todava no se han definido. 3. La configuracin de los ejes(Axes) Los ejes(Axes) son las lneas que definen los lmites de los puntos de datos que un grfico puede mostrar. En este ejemplo se utiliza una de las configuraciones de ejes ms comunes - un eje horizontal eje "x", y un eje vertical "y": Ext.create('Ext.chart.Chart', {
... axes: [ { //viene siendo el eje Y (vertical) title: 'Temperatura',

type: 'Numeric', position: 'left', // fields: ['temperature'], //campo temperatura minimum: 0, //valor minimo para este campo maximum: 100 //valor Maximo para este campo }, { //viene siendo el eje X (Horizontal) title: 'Time', type: 'Time', position: 'bottom', fields: ['date'], dateFormat: 'ga' //le dice al eje de tiempo cmo dar formato a su etiqueta. } ] });

La "temperatura" del eje es un eje numrico vertical y se coloca en el borde izquierdo del grfico. Representa a los lmites de los datos contenidos en el "WeatherPoint" Modelo de "temperatura" del campo(fields) que se defini anteriormente. El valor mnimo para este eje es "0", y el mximo es de "100". El eje horizontal es un eje de tiempo y se coloca en el borde inferior del grfico. Representa a los lmites de los datos contenidos en el "WeatherPoint" Modelo de "Fecha" del campo(fields) . La configuracin dateFormat le dice al eje de tiempo cmo dar formato a su etiqueta. Esto es lo que se ve en la grfica ahora que tiene sus ejes configurados:

4. Configuracin de la Serie El ltimo paso en la creacin de un grfico simple es configurar una o ms series. Series son los responsables de la representacin visual de los puntos de datos contenidos en el Store. Este ejemplo slo tiene una sola serie:
series: [ { type: 'line', xField: 'date', yField: 'temperature'

} ]

Esta serie es una serie de lnea, y utiliza la "fecha" y "temperatura" campos de las "modelos" WeatherPoint en la tienda para representar sus puntos de datos: Ejemplo Serie de Lnea

5-Temas El esquema de color de un grfico se puede cambiar fcilmente utilizando la opcin de configuracin del tema: theme: 'Green', Finalmente quedaria asi la creacion del objeto chart //3-Creacin de un objeto grfico o Chart Ext.create('Ext.chart.Chart', { renderTo: Ext.getBody(), width: 400, height: 300, store: store, //4-estos son los ejes Y(Vertical) y X(Horizontal) axes: [ { //viene siendo el eje Y (vertical) title: 'Temperatura', type: 'Numeric', position: 'left', // indica que es vertical fields: ['temperature'], //campo temperatura minimum: 0, //valor minimo para este campo maximum: 100 //valor Maximo para este campo }, { //viene siendo el eje X (Horizontal)

title: 'tiempo', type: 'Time', position: 'bottom', //indica que es horizontal fields: ['date'], //campo tiempo dateFormat: 'ga' //le dice al eje de tiempo cmo dar formato a su etiqueta. } ], //Configurando las series series: [ { type: 'line', xField: 'date', yField: 'temperature' } ], //5-Tema cambio de colores al grafico theme: 'Green' //en este caso verde });

Drawing and Charting (Dibujo y Grficos)

Este documento est destinado a guiarlo a travs del diseo de conjunto y detalles de la implementacin de los paquetes de dibujo y grficos. Los paquetes de dibujo y grficos son compatible con todos los navegadores y dispositivos y permiten crearse en los navegadores de manera cruzada de forma verstil. La estructura de este documento cubren tres temas principales: * Seccin I: "dibujar" Un paquete de cross-browser/device verstil para dibujar grficos de propsito general y animaciones. * Seccin II: "Tabla" Una presentacin de alto nivel del paquete de grficos y de cmo las clases se organizan en ella. * Seccin III: "Serie" Una presentacin de las series disponibles y su uso. I. El paquete Dibujar Las opciones de diseo en el dibujo de equipos grficos no se restringi slo para grficos: necesitbamos una herramienta verstil que nos permite crear grficos personalizados de una manera cross-browser/device y tambin realizar animaciones ricas con ellos. El paquete Dibujar contiene una clase de superficie que abstrae la implementacin de grficos subyacente y permite al desarrollador crear sprites de forma arbitraria o SpriteGroups que responden a las interacciones, como los eventos de ratn y tambin proporcionar animaciones ricas en todos los atributos como forma, color, tamao, etc Las implementaciones subyacentes/concretas para la clase de superficie son SVG (SVG para navegadores capaces) y VML (de la familia Internet Explorer - <9). La superficie puede ser considerada como una interfaz para los motores de renderizado SVG y VML. La superficie es agnstica a sus implementaciones subyacentes. La mayora de los mtodos y formas para crear sprites estn fuertemente inspirado en el estndar SVG. Creacin de una superficie de dibujo Se puede crear una superficie de dibujo simple, sin la carga del paquete de grficos en absoluto. Esto puede ser til para crear grficos arbitrarios que funcionan en todos los navegadores o dispositivos y animar as. Por ejemplo, puede crear un mapa interactivo de los Estados Unidos, donde cada estado es un sprite, o tambin una infografa donde cada elemento es un sprite. Lo interesante de hacer sprites y no las imgenes es que el documento no solo adquiere un nuevo nivel de interactividad, sino tambin que al ser VML y SVG basada en imgenes nunca van a perder calidad y se puede imprimir correctamente. Con el fin de utilizar el paquete de dibujar directamente puede crear un componente de Dibujo y (por ejemplo) aadir a un Ext.Window: var drawComponent = Ext.create('Ext.draw.Component', { viewBox: false, items: [{ type: 'circle', fill: '#ffc', radius: 100, x: 100, y: 100 }]

}); Ext.create('Ext.Window', { width: 230, height: 230, layout: 'fit', items: [drawComponent] }).show(); En este caso hemos creado un componente dibujo y agreg un sprite a la misma. El tipo de la clase Sprite es el crculo de modo que si se ejecuta este cdigo vers un crculo verde en una ventana. Cuando se configura en false viewBox que son responsables de establecer la posicin del objeto y las dimensiones en consecuencia. Los sprites pueden tener diferentes tipos. Algunos de ellos son: * Crculo - Para dibujar crculos. Puede configurar el radio con el parmetro de radio en la configuracin del sprite. * Rect - Para hacer rectngulos. Puede establecer la anchura y la altura del rectngulo utilizando los parmetros de anchura y altura en la configuracin del sprite. * El texto - Para representar el texto como un elemento sprite. Puede establecer la fuente / font-size con el parmetro de la fuente. * Ruta - El tipo de sprite de los ms poderosos. Con l usted puede crear formas arbitrarias usando la sintaxis de la ruta SVG. Usted puede encontrar un rpido tutorial sobre cmo empezar con la sintaxis de la ruta aqu. Un Sprite es un objeto representado en una superficie de dibujo. Hay diferentes opciones y tipos de sprites. La configuracin de un Sprite es un objeto con las siguientes propiedades: *type(Tipo) - (String) El tipo del sprite. Las opciones posibles son'circle', 'path', 'rect', 'text', 'square'. *width(Ancho) - (Nmero) Se utiliza en los sprites del rectngulo, el ancho del rectngulo. *width(Altura) - (Nmero) Se utiliza en los sprites del rectngulo(rectangle), la altura del rectngulo. *size(tamao) - (Nmero) Se utiliza en los sprites cuadrados(square), la dimensin de la plaza. *radius(Radio) - (Nmero) Se utiliza en los sprites del circle, el radio del crculo. *X - (Nmero) La posicin a lo largo del eje x. *Y - (Nmero) La posicin a lo largo del eje. *path(Ruta de acceso) - (Array) Utilizado en los sprites de path, el path del sprite escrito en sintaxis SVG-like. opacity(opacidad) - (Nmero) La opacidad del sprite. * fill(Llenar) - (String) El color de relleno. *stroke - (String) El color del trazo. * stroke-width(ancho del trazo) - (Nmero) El ancho del trazo. *font(Fuente) - (String) se utiliza con los sprites de tipo texto. La descripcin de la fuente completa. Utiliza la misma sintaxis que el parmetro de fuente CSS. *text(texto) (String). Se utiliza con los sprites de tipo texto. El texto en s. Adems, hay tres propiedades para los objetos para su transformacion que se pueden establecer con SetAttributes los valores (translate[traslacion], rotate[rotar] and scale[escala]) Veamos un ejemplo de como trasladar la posicion x,y de un objeto

sprite.setAttributes({
translate: { x: 10, y: 10 } }, true);

Ejemplo para rotar el objeto

sprite.setAttributes({ rotate: { degrees: 90 } }, true);

Ejemplo para cambiar de escala al objeto

sprite.setAttributes({ scale: { x: 10, y: 3 } }, true);

CHART
El paquete grfico consta de una jerarqua de clases que definen un contenedor grfico (algo as como una superficie, pero ms especfica para el manejo de grficos), ejes(axes), leyendas(legends), series(series), etiquetas(labels), llamadas(callouts), tips, las coordenadas cartesianas(cartesian) y radial, y series especficas como el pastel(Pie), reas(Area), barras(Bar), etc La clase Chart es la clase principal de la serie. Se gestiona la prestacin de cada serie y tambin cmo se dibujan y definen los ejes. Tambin los eventos del ratn sobre las partes del grfico. La clase Chart es una extensin de Draw Component. * Los ejes (chart.axes). Todos los graficos definen un eje para su visualizacin. Esta es una coleccin mixta. * Serie - (chart.series). Todas las series elaboran un grfico. Esto podra ser de lneas, barras, de dispersin, etc Ademas admite coleccines mixta. *La leyenda Cuadro de la leyenda y sus elementos de leyenda. Se puede agregar eventos personalizados justo antes y durante la renderizacion de la visualizacin. ejemplo
chart.on({ 'refresh': function() { alert('(re)drawing the chart'); } });

Legend(Leyenda)
Acepta el parmetro leyenda para servir de guia a los elementos de cada serie Ejemplo: axes: [/*set an axis configuration*/],

Axis
El paquete de eje contiene una clase abstracta que se extiende desde el cartesiano(Axis) hasta ejes radiales(Radial usa coordenadas polares para mostrar las basadas en radianes como son las series de Radar, pie). Los ejes estn vinculados con el tipo de datos que estamos tratando de representar. Hay ejes para informacin categrica (llamado eje de categoras o Category) y tambin el eje de la informacin cuantitativa( llamado numrico o Numeric). Para informaciones basada en el tiempo(Time) que nos permite representar la informacin en un perodo especfico de tiempo, y para actualizar ese perodo de tiempo con animaciones fluidas. Un eje contiene las divisiones y subdivisiones de los valores, representados por las marcas mayores y menores. Estos se pueden ajustar automtica o manualmente a algn intervalo de tiempo especificado, los valores mximos y mnimos. Las opciones de configuracin maximum, minimum, majorTickSteps y minorTickSteps en los ejes numrico son utilizados para cambiar la configuracin y la colocacin de las marcas mayores y menores. Por ejemplo, mediante:

Degradados(Gradients)
El dibujo y el paquete de grficos tambin tiene el poder para crear degradados lineales. Los gradientes se puede definir en el objeto de configuracin grfico como una gran variedad de configuraciones de gradiente. Para cada configuracin de gradiente de los siguientes parmetros se especifican: *id(Identificacin) - String - El nombre nico de la pendiente. *angle(ngulo) - nmero, opcional - El ngulo de la pendiente en grados. *stops(Detiene) - Object - Un objeto con los nmeros como claves (de 0 a 100) y objetos de estilo como los valores. Cada clave en el objeto stops representa el porcentaje del relleno en el color especificado por el gradiente. Ejemplo: ver ejemplo de gradientes

Series
Una serie es una clase abstracta extendida por visualizaciones concretas como la de lnea o de dispersin. La clase de la serie contiene un cdigo que es comn a todas estas series, como la gestin de eventos, manejo de animaciones, sombras, degradados, compensaciones comunes, etc La clase de la serie se ha mejorado con un conjunto de mixins que proporcionan funcionalidades como resaltado, llamadas, sugerencias, etc Una serie que contiene una matriz de elementos donde cada elemento contiene informacin sobre la ubicacin de cada elemento, su sprite asociado y storeItem uno. La serie tambin comparten el mtodo drawSeries que actualiza todas las posiciones para la serie y luego renderiza la serie.

Theming (Tematizacin)
El objeto de configuracin chart puede tener una propiedad tema(theme) con un valor de cadena que hace referencia a un nombre de tema incorporado. var chart = Ext.create('Ext.chart.Chart', {
theme: 'Blue', /* Other options... */ });

Un tema define el estilo de las formas, color, fuente, los ejes y el fondo de un grfico. La configuracin de creacin de temas puede ser muy rica y compleja: **Ver ejemplo de temas Tambin podemos crear un conjunto de colores que sern la base para todo el tema slo por la creacin de una matriz simple de los colores en el objeto de configuracin como:
{ colors: ['#aaa', '#bcd', '#eee'] }

Al establecer un color de base el tema va a generar una gran variedad de colores que coincidan con el color de base: ** ver ejemplo Usted puede crear un tema personalizado que se extiende desde el tema de base. Por ejemplo, para crear un tema personalizado de lujo que podemos hacer: ** ver ejemplo

III. Series
La siguiente seccin se pasar a travs de nuestra disponible serie/visualizaciones, la introduccin de cada uno de ellos y

mostrarles un ejemplo de configuracin completa de la serie. El ejemplo incluye el grfico, el eje de la serie y las opciones de configuracin. Area Crea un grfico de reas apiladas. El grfico de reas apiladas es til cuando se muestran mltiples capas de agregados de la informacin. Al igual que con todas las dems series, la serie El rea debe ser aadido en la configuracin de serie de serie de grficos. Crea un grfico de reas apiladas. El grfico de reas apiladas es til cuando se muestran mltiples capas de agregados de la informacin. Al igual que con todas las dems series, la [serie Area] debe ser aadido en las serie chart configuracion array.

Bar
Crea un grfico de barras. Un grfico de barras es una tcnica til de visualizacin para mostrar la informacin cuantitativa de las diferentes categoras que pueden mostrar una cierta progresin (o regresin) en el conjunto de datos. Al igual que con todas las dems series, la serie de barras debe ser aadido en la configuracin de serie de serie de grficos.

Line
Un grfico de lneas es una tcnica til de visualizacin para mostrar la informacin cuantitativa de las diferentes categoras o de otros valores reales (en comparacin con el grfico de barras), que puede mostrar una cierta progresin (o regresin) en el conjunto de datos. Al igual que con todas las dems series, la serie de la lnea debe ser aadido en la configuracin de serie de serie de grficos.

Pie(circular o pastel)
Un grfico circular es una tcnica til de visualizacin para mostrar la informacin cuantitativa de las diferentes categoras que tambin tienen un significado en su conjunto. Al igual que con todas

las dems series, la serie Pie debe ser aadido en la configuracin de serie de serie de grficos.

Radar
Un grfico radial es una tcnica de visualizacin til para comparar diferentes valores cuantitativos para un nmero limitado de categoras. Al igual que con todas las dems series, la serie de radar debe ser aadido en la configuracin de serie de serie de grficos.

Scatter (dispersin)
El grfico de dispersin es til cuando se trata de mostrar ms de dos variables en la misma visualizacin. Estas variables pueden ser trazadas en coordenadas x, y y tambin para el radio de un elemento / tamao, color, etc Al igual que con todas las dems series, la serie de dispersin debe ser

aadido en la configuracin de serie de serie de grficos.

Gauge(indicador)
Grfico de indicador se utilizan para mostrar el progreso en una determinada variable. Hay dos maneras de utilizar el diagrama de este tipo. Uno de ellos es el establecimiento de un elemento del store en el medidor y seleccionar el campo para ser utilizado de esa tienda. Otra es crear instancias de la visualizacin y el uso del mtodo setValue para ajustar el valor que desee.

En esta configuracin, se crea un eje medidor especial para ser utilizado con la visualizacin de ajuste (que describen semicrculo marcadores), y tambin estamos estableciendo algunas opciones de configuracin mxima, mnima y medidas en el eje. La configuracin en serie medidor contiene el campo store a ser unido a la presentacin visual y el grupo de colores para ser utilizado con la visualizacin.