Ext 4 Charting and Visualization

Jason Johnston- CSS3 Pie -

Nicolas Belmonte- InfoVis -

Dmitry Baranovskiy- Raphaël -

Canvas Engine

Ext DrawWorking with Vector Graphics

Surface

VML Engine

Sprite

SVG Engine

Ext.draw.Surface

Rendering of primitives: Ellipses, Rectangles, Complex PathsTextImagesGradients

Ext.draw.Sprite

Abstracted drawing elementsNormalizes di!erences between engine API syntaxAttributesEvent support (extends Observable)Transforms (Rotate, Translate, Scale)Animation supported through Ext.fxSpriteComposites

Ext.draw.DrawComponent

Extends Ext.ComponentEngine preference via feature detectionCustomizable engine preference orderLayout participation

DrawComponent Sample

Draw Component Sample

HTML5 Standards

Based

Resolution Independence

Ext Charts

Chart

Working with Charts

ScatterLine/AreaBar/ColumnPie

LegendSeriesAxisStore

DrawComponent

Callout

Simple Pie Chart

Simple Pie Chart

Series Properties

Label configurationAnimation e!ectsShadow e!ectsHighlighting e!ectsGradientsLegendsCalloutsRenderers

Label Options

Full Font stylingOrientationRotationPositioningRenderers

Legends

Positioning: top, bottom, left, right, floatingVertical/Horizontal stackingStyling using same Label API

Callouts

Tooltips on steroidsSeries/Chart highlightingAxis selection - pan/zoom

Gradients

Shared across all seriesAccessed by reference idMultiple color supportLinear gradientsMultiple opacity stop supportRadial gradients

Linear Gradient Sample

Pie Properties

angleFieldlengthFieldStackingPie or Donuts?

Styled Pie Chart

Series Renderers

Similar concept to Grid RenderersCustomize any propertyReturn new set of propertiesAvailable to all series

Series Renderers

Styled Pie Chart

Cartesian Charts

Axis supportBar/Column, Line/Area, Scatter PointMix and Match

Axes

Numeric, Category and TimeAlign to top, bottom, left, rightBind each axis to di!erent data setsEllipsis supportGridline supportFull label configuration support

Axis Sample

Column Sample

Column Charts

Column/Bar Properties

Assign an array of fields to add groupingStack flag to change to stacking

Column/Bar Sample

Grouped/StackedBar/Column

Line Charts

MarkersSmoothingFillsStacking for area charts

Line Charts

Stocks Sample

Scatter Charts

Mixed Series

Beyond Charting

Full Graphical DashboardsGraphic Display GaugesHeatmapsOrganizational ChartsNetwork DiagramsInteractive Maps and Location ComponentsVenn Diagrams

Thank You!

@jamieavins