Ext.chart.series.SeriesSeries: 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: chartCharts 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 ChartCada 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 ChartExt.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 -